How to set colspan and rowspan in JSFGrid?

Question

How to set colspan and rowspan in JSF <h:panelGrid> ?

Answer 1

None of these are possible with the standard JSF implementation. There are three ways to fix this:

• Write plain HTML. A <h:panelGrid> basically displays the HTML <table> . Do the same.
• Create your own HTML renderer that supports this. However, there will be a lot of sweat and pain.
• Use a third-party component library that supports this.
  • Tomahawk has a <t:panelGroup> component that supports colspan in <h:panelGrid> .
  • RichFaces (only 3.x) has <rich:column> , which supports both colspan and rowspan in <rich:dataTable> .
  • PrimeFaces has a <p:row> next to <p:column> , which is supported both in <p:panelGrid> and <p:dataTable> (also with <p:columnGroup> ).

Answer 2

Since 24 januari 2012 Primefaces also has the ability to use colspan and rowspan in the panelGrid component of Primefaces. Cm:

http://www.primefaces.org/showcase/ui/panel/panelGrid.xhtml

Answer 3

Usage: rich: column colspan="2" of RichFaces

 <rich:column colspan="2"> <h:outputText value="Ingrese el texto de la imagen" /> </rich:column> 

Answer 4

I agree with BalusC's answer and want to add that the Primefaces JSF2 component library also offers this function if you use its p: dataTable component. It is called a grouping.

Answer 5

suppose

a) message resource file with two entries:
key.row = <b> </TD> </TR> <TR> <td (ignore spaces)
key.gt = >

b) row.xhtml

 <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jsp/jstl/core" > <c:forEach begin="0" end="#{colspan-2}"> <h:panelGroup /> </c:forEach> <h:panelGroup> <h:outputText value="#{i18n['key.row']}" escape="false" /> <h:outputText value=" colspan='#{colspan}' #{cellAttributes}" /> <h:outputText value="#{i18n['key.gt']}" escape="false" /> <ui:insert /> </h:panelGroup> </ui:composition> 

then for example

 <h:panelGrid columns="3"> <h:outputText value="r1-c1" /> <h:outputText value="r1-c2" /> <h:outputText value="r1-c3" /> <ui:decorate template="/row.xhtml"> <ui:param name="colspan" value="3" /> <ui:param name="cellAttributes" value=" align='center'" /> <div>Hello!!!!!</div> </ui:decorate> </h:panelGroup> 

prints a table with three rows:

1) r1-c1, r1-c2, r1-c3

2) 3 empty cells

3) a cell-aligned center having a cap 3 and containing hi-div.

V.

Answer 6

It is not possible to determine the range of columns in a panel grid, but if you use it wisely, you can only do this with a simple tag. One example that I would like to show you.

 <h:panelGrid columns="1" > <h:panelGrid columns="2"> <h:commandButton image="resources/images/Regular5.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=REGULAR"> </h:commandButton> <h:commandButton id="button2" image="resources/images/Casual2.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=CASUAL"> </h:commandButton> </h:panelGrid> <h:panelGrid columns="2"> <h:commandButton id="button3" image="resources/images/Instant2.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=INSTANT"> </h:commandButton> <h:commandButton id="button4" image="resources/images/Outstation6.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=OUTSTATION"> </h:commandButton> </h:panelGrid> <h:commandButton id="button5" image="resources/images/ShareMyCar.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=OUTSTATION"> </h:commandButton> 

Note that button5 spans two columns based on the required size.