Hi,
I need to build a view which alows users to edit a form of sold items per category per day . Form data is a Collection of days (from Monday to Friday) which contains category Collection. The form shoul look like this:
I tried to use rich:dataTable with two columns. In the first column is a day and in the second column is nested rich:dataDatable. But I need to show the header exactly like in the picture.
Can anybody give me a help?
Thanks
Hi, Pavel.
How about this solution:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.org/rich"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<h:outputStylesheet>
.rf-dt1 {
width: 100% !important;
}
</h:outputStylesheet>
</h:head>
<h:body>
<rich:dataTable value="#{myBeen.mlist}" var="v">
<rich:column>
<f:facet name="header">Day</f:facet>
<h:outputText value="#{v.value1}"/>
</rich:column>
<rich:column style="padding: 0px;">
<f:facet name="header">Category</f:facet>
<rich:dataTable value="#{v.list}" var="l" styleClass="rf-dt1">
<rich:column width="100">
<h:outputText value="#{l.value1}"/>
</rich:column>
</rich:dataTable>
</rich:column>
<rich:column style="padding: 0px;">
<f:facet name="header">Amount</f:facet>
<rich:dataTable value="#{v.list}" var="l" styleClass="rf-dt1">
<rich:column width="100">
<h:outputText value="#{l.value2}"/>
</rich:column>
</rich:dataTable>
</rich:column>
</rich:dataTable>
</h:body>
</html>
Thanks Vitaliy, it is exactly what I need. I need one more little help. In column Amount I use h:inputText which breaks the height of lines in the table. Any idea how to fix it? Probably some CSS styles?
Thanks
It's possible using CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.org/rich"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<h:outputStylesheet>
.rf-dt1 {
width: 100% !important;
}
.rf-dt-c1{
padding: 0px !important;
}
</h:outputStylesheet>
</h:head>
<h:body>
<rich:dataTable value="#{myBeen.mlist}" var="v">
<rich:column>
<f:facet name="header">Day</f:facet>
<h:outputText value="#{v.value1}"/>
</rich:column>
<rich:column style="padding: 0px;">
<f:facet name="header">Category</f:facet>
<rich:dataTable value="#{v.list}" var="l" styleClass="rf-dt1">
<rich:column width="100">
<h:outputText value="#{l.value1}"/>
</rich:column>
</rich:dataTable>
</rich:column>
<rich:column style="padding: 0px;">
<f:facet name="header">Amount</f:facet>
<rich:dataTable value="#{v.list}" var="l" styleClass="rf-dt1">
<rich:column width="100" styleClass="rf-dt-c1">
<h:inputText value="#{l.value2}"/>
</rich:column>
</rich:dataTable>
</rich:column>
</rich:dataTable>
</h:body>
</html>