4 Replies Latest reply on Nov 25, 2011 9:54 AM by Pavel Zelenka

    Table inside a column

    Pavel Zelenka Newbie

      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:

       

      form.jpg

       

      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

        • 1. Re: Table inside a column
          Vitaliy Pavlov Novice

          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>

           

          table1.PNG

          • 2. Re: Table inside a column
            Pavel Zelenka Newbie

            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

            • 3. Re: Table inside a column
              Vitaliy Pavlov Novice

              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>

              • 4. Re: Table inside a column
                Pavel Zelenka Newbie

                Thanks. I finally used fixed TD height