Thursday, June 21, 2012

Customized JSF table

Problem:
To create a data table in JSF in which the first row data spans across the columns ie only one column in the first row and the second row had 8 columns and it should alternate like that. This is not possible with h:dataTable tag

Reason:
The h:dataTable tag renderds data column wise

Solution:
To create such a table with column span use jstl along with plain html and jsf components

Sample Code:
 <c:forEach items="#{HospInvProfBean.productList}" var="product" varStatus="status"> /> <tr><td colspan="8" class="genText">  
  <h:outputText value="#{product.productDescription}"/></td> </tr>  
  <tr class="dtlLineCen">  
  <td style="width: 10%;">  
 <span class="genText">Minimum</span></td>  
 <td><h:inputText size="4" value="#{product.oposMin}" converter="javax.faces.Long" converterMessage="Not a number"/></td>  
  <td><h:inputText size="4" value="#{product.aposMin}" converter="javax.faces.Long" converterMessage="Not a number" /></td>  
 <td><h:inputText size="4" value="#{product.bposMin}" required="true" /></td>              
  <td><h:inputText size="4" value="#{product.abposMin}" required="true" /></td>     
  <td><h:inputText size="4" rendered="#{product.aboGroup}" value="#{product.onegMin}" required="true" /></td>              
  <td><h:inputText size="4" rendered="#{product.aboGroup}" value="#{product.anegMin}" required="true" /></td>              
 <td><h:inputText size="4" rendered="#{product.aboGroup}" value="#{product.bnegMin}" required="true" /></td>             
 <td><h:inputText size="4" rendered="#{product.aboGroup}" value="#{product.abnegMin}" required="true" /></td></tr>             
 <tr class="dtlLineAltCen">  
 <td style="width: 10%;"><span class="genText">Optimal</span></td>            <td><h:inputText size="4" value="#{product.oposOpt}" required="true" /></td>  
  <td><h:inputText size="4" value="#{product.aposOpt}" required="true" /></td>  
  <td><h:inputText size="4" value="#{product.bposOpt}" required="true" /></td>  
 <td><h:inputText size="4" value="#{product.abposOpt}" required="true" /></td>  
  <td><h:inputText size="4" rendered="#{product.aboGroup}" value="#{product.onegOpt}" required="true"/></td>  
  <td><h:inputText size="4" rendered="#{product.aboGroup}" value="#{product.anegOpt}" required="true"/></td>  
  <td><h:inputText size="4" rendered="#{product.aboGroup}" value="#{product.bnegOpt}" required="true"/></td>  
  <td><h:inputText size="4" rendered="#{product.aboGroup}" value="#{product.abnegOpt}" required="true"/></td>  
 </c:forEach>  

Followers