1 Reply Latest reply on Mar 28, 2012 5:33 AM by sandro.braendli

    rich:extendedDataTable in rich:panel is compressed

    sandro.braendli

      Hello everyone,

       

      I am trying to use an extendedDataTable inside a panel. I am using the following Code:

       

      {code:xml}<?xml version="1.0" encoding="ISO-8859-1" ?>

      <ui:composition

                xmlns:jsp="http://java.sun.com/JSP/Page"

                xmlns="http://www.w3.org/1999/xhtml"

                xmlns:h="http://java.sun.com/jsf/html"

                xmlns:f="http://java.sun.com/jsf/core"

                xmlns:a4j="http://richfaces.org/a4j"

                xmlns:rich="http://richfaces.org/rich"

                xmlns:ui="http://java.sun.com/jsf/facelets">

       

       

                <f:view>

                          <h:head></h:head>

                          <h:body>

                                    <h:form id="form">

                                              <rich:panel style="width:400px">

                                                        <rich:extendedDataTable value="#{mitarbeiterBean.mitarbeiter}" var="mitarbeiter" style="width: 100%;">

                                                                  <rich:column sortBy="#{mitarbeiter.vorname}">

                                                                            <f:facet name="header">

                                                                                      <h:outputText value="Vorname" />

                                                                            </f:facet>

                                                                            <h:outputText value="#{mitarbeiter.vorname}" />

                                                                  </rich:column>

       

       

                                                                  <rich:column sortBy="#{mitarbeiter.nachname}">

                                                                            <f:facet name="header">

                                                                                      <h:outputText value="Nachname" />

                                                                            </f:facet>

                                                                            <h:outputText value="#{mitarbeiter.nachname}" />

                                                                  </rich:column>

                                                        </rich:extendedDataTable>

                                              </rich:panel>

                                    </h:form>

                          </h:body>

                </f:view>

      </ui:composition>{code}

       

      And the bean:

       

      {code}

      import javax.inject.Named;

       

       

       

       

      @Named

      public class MitarbeiterBean {

                public class Mitarbeiter {

                          private String vorname;

                          private String nachname;

       

       

                          public Mitarbeiter (String vorname, String nachname) {

                                    this.vorname= vorname;

                                    this.nachname= nachname;

                          }

       

       

                          public String getVorname () {

                                    return vorname;

                          }

       

       

                          public void setVorname (String vorname) {

                                    this.vorname= vorname;

                          }

       

       

                          public String getNachname () {

                                    return nachname;

                          }

       

       

                          public void setNachname (String nachname) {

                                    this.nachname= nachname;

                          }

                }

       

       

                public Mitarbeiter[] getMitarbeiter () {

                          return new Mitarbeiter[] {

                                    new Mitarbeiter("Hans", "Müller"),

                                    new Mitarbeiter("Heiri", "Meier"),

                                    new Mitarbeiter("Max", "Mustermann"),

                                    new Mitarbeiter("Susi", "Sorgenlos")

                          };

                }

      }{code}

       

      In the attached picture you can see how the result looks. What I actually want is that the table uses its space in the panel and expands its columns to the right.

       

      I am thankful for any advice.

        • 1. Re: rich:extendedDataTable in rich:panel is compressed
          sandro.braendli

          It looks correct with the following Code:

          {code:xml}

          <?xml version="1.0" encoding="ISO-8859-1" ?>

          <ui:composition xmlns:jsp="http://java.sun.com/JSP/Page" xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"

                    xmlns:f="http://java.sun.com/jsf/core" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"

                    xmlns:ui="http://java.sun.com/jsf/facelets">

           

           

           

           

                    <f:view>

                              <h:head>

                              </h:head>

                              <h:body>

                                        <style>

          .rf-edt-tbl {

                    width: 100%;

          }

           

           

          .rf-edt-tbl tr td {

                    width: 50%;

          }

           

           

          .rf-edt-tbl tr td div {

                    width: auto;

          }

                                        </style>

           

                                        <h:form id="form">

                                                  <rich:panel style="width: 300px">

                                                            <rich:extendedDataTable value="#{mitarbeiterBean.mitarbeiter}" var="mitarbeiter" style="height: 400px;">

                                                                      <rich:column sortBy="#{mitarbeiter.vorname}">

                                                                                <f:facet name="header">

                                                                                          <h:outputText value="Vorname" />

                                                                                </f:facet>

                                                                                <h:outputText value="#{mitarbeiter.vorname}" />

                                                                      </rich:column>

           

           

           

           

                                                                      <rich:column sortBy="#{mitarbeiter.nachname}">

                                                                                <f:facet name="header">

                                                                                          <h:outputText value="Nachname" />

                                                                                </f:facet>

                                                                                <h:outputText value="#{mitarbeiter.nachname}" />

                                                                      </rich:column>

                                                            </rich:extendedDataTable>

                                                  </rich:panel>

                                        </h:form>

                              </h:body>

                    </f:view>

          </ui:composition>{code}

           

          The essential part are the styles defined on top.

           

          Unfortunately this doesn't solve the whole problem. If there is more data and a scrollbar appears, the layout is wrong again (see Attachment).