How to use RichFaces for table

[uryl]

Hi guys,

I have to create a HTML table on my page. The table will have 2 columns: 1 for Label and 2nd for the component. In header it will have a label. In footer it has 2 command buttons.

Label Component
---------------------------------------------------------------------
Database : a HTML Select element
User Id: a HTML input element of type "text"
Password: a HTML input element of type "password"
Language: a HTML Select element

I was able to do it with JSF without using RichFaces.

<h:panelGrid id="table_login" columns="2" border="1" headerClass="tableHeaderLabel" columnClasses="tableColumnLabel">
 <f:facet name="header">
 <h:outputText value="#{labels.welcome}"/>
 </f:facet>

 <h:outputLabel for="udatabase" value="#{labels.database}" />
 <h:selectOneMenu id="udatabase" value="#{userLoginInfoBean.dataSourceName}" required="true" styleClass="selectOneMenuLabel">
 <f:selectItems value="#{appInfoBean.dataSourceNamesList}"/>
 </h:selectOneMenu>

 <h:outputLabel for="uname" value="#{labels.userid}" />
 <h:inputText id="uname" value="#{userLoginInfoBean.userId}" required="true" size="15" styleClass="inputTextLabel">
 </h:inputText>

 <h:outputLabel for="upassword" value="#{labels.password}" />
 <h:inputSecret id="upassword" value="#{userLoginInfoBean.userPassword}" required="true" size="15" styleClass="inputTextLabel">
 </h:inputSecret>

 <h:outputLabel for="ulanguage" value="#{labels.language}" />
 <h:selectOneMenu id="ulanguage" value="#{userLoginInfoBean.languageId}" required="true" styleClass="selectOneMenuLabel">
 <f:selectItems value="#{appInfoBean.languagesList}"/>
 </h:selectOneMenu>


 <f:facet name="footer">
 <h:panelGroup style="display:block; text-align:center">
 <h:commandButton id="cblogin" value="#{labels.login}" styleClass="commandButtonLabel" />
 <h:commandButton id="cbreset" value="#{labels.reset}" styleClass="commandButtonLabel" />
 </h:panelGroup>
 </f:facet>
</h:panelGrid>

Now I have a requirement to have one more row in my table. And that row's label will need a rowspan of 2 rows. I find out that JSF does not support it so now I want to use RichFaces for this problem. Problem is to figure out which component to use. I was thinking rich:dataTable but it is totally different than what I want.

Can anybody give some idea?

Thanks

[georgemic]

You should be able to nest the panelGrid tags to provide the rowspan that you need. Try this:

<h:panelGrid id="table_login" columns="2" border="1" headerClass="tableHeaderLabel" columnClasses="tableColumnLabel">
 <f:facet name="header">
 <h:outputText value="#{labels.welcome}"/>
 </f:facet>

 <h:outputLabel for="udatabase" value="#{labels.database}" />
 <h:selectOneMenu id="udatabase" value="#{userLoginInfoBean.dataSourceName}" required="true" styleClass="selectOneMenuLabel">
 <f:selectItems value="#{appInfoBean.dataSourceNamesList}"/>
 </h:selectOneMenu>

 <h:outputLabel for="uname" value="#{labels.userid}" />
 <h:inputText id="uname" value="#{userLoginInfoBean.userId}" required="true" size="15" styleClass="inputTextLabel">
 </h:inputText>

 <h:outputLabel for="upassword" value="#{labels.password}" />
 <h:inputSecret id="upassword" value="#{userLoginInfoBean.userPassword}" required="true" size="15" styleClass="inputTextLabel">
 </h:inputSecret>

 <h:outputLabel for="ulanguage" value="#{labels.language}" />
 <h:selectOneMenu id="ulanguage" value="#{userLoginInfoBean.languageId}" required="true" styleClass="selectOneMenuLabel">
 <f:selectItems value="#{appInfoBean.languagesList}"/>
 </h:selectOneMenu>

 <h:outputLabel for="subtable_content" value="#{labels.subtable_content}" />
 <h:panelGrid id="subtable_content" columns="1" border="0" cellspacing="0" cellpadding="0">
 <h:inputText id="newcomponent1" value="#{userLoginInfoBean.newcomponent1}" required="true" size="15" styleClass="inputTextLabel"/>
 <rich:spacer height="10px"/>
 <h:inputText id="newcomponent2" value="#{userLoginInfoBean.newcomponent2}" required="true" size="15" styleClass="inputTextLabel"/>
 </h:panelGrid>

 <f:facet name="footer">
 <h:panelGroup style="display:block; text-align:center">
 <h:commandButton id="cblogin" value="#{labels.login}" styleClass="commandButtonLabel" />
 <h:commandButton id="cbreset" value="#{labels.reset}" styleClass="commandButtonLabel" />
 </h:panelGroup>
 </f:facet>
</h:panelGrid>