How to set colspan and rowspan in JSF panelGrid?

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

None of both is possible with the standard JSF implementation. There are 3 ways to fix this:

1. Write plain HTML yourself. A <h:panelGrid> basically renders a HTML <table>. Do the same.
2. Create a custom HTML renderer which supports this. It'll however be a lot of sweat and pain.
3. Use a 3rd party component library which supports this.

• Tomahawk has a <t:panelGroup> component which supports colspan in <h:panelGrid>.

• RichFaces (3.x only) has a <rich:column> component which supports both colspan and rowspan in <rich:dataTable>.

• PrimeFaces has a <p:row> next to <p:column> which is supported in both <p:panelGrid> and <p:dataTable> (also with <p:columnGroup>).

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

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

Assume

1. a message resource file with two entries:

> key.row=</td></tr><tr><td
key.gt=>

2. 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>
   

Prints a table with 3 rows:

1. r1-c1, r1-c2 , r1-c3

2. 3 blank cells

3. a cell aligned center, having colspan 3 and containing a hello div.

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

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


		

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

There is no way to define column span in panel grid but if used wisely you can make it happen by just plain tag only. One example 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>

Please note that button5 spans two columns given the size it requires.