1 2 Previous Next 18 Replies Latest reply on Jan 9, 2013 11:33 AM by kaveh_a

    RichFaces 3.3.X to 4.2.3 migration and extenededDataTable render issue

    kaveh_a

      Hi everyone

      We are facing an issue when the extended data table is hidden (parent div.display='hidden' ) and then made visible (parent div.display='block') then the table looses all its columns and data is not displayed properly (tables are empty originally).  Subsuquent render calls to teh table will not fix this issue.

       

      We have the following two files in our main (index.xhtml) file.  Each of the following files (File1 and File2) have 1 or 2 extended data tables in them.  (They are originally empty).

      Once the page is loaded if we want to make file 1 visible (by setting file1.display='block')  then the tables don't function properly. All column headers are lost originally when the table is empty.  Also once data is returned to tables data is not displayed (rendered) in the table properly.

       

      We have been able to make this situation better by taken the style="display:none" from each div.  Using this approach will allow the tables to render properly. However every time the browser is resized the table that is hidden is running to the same problem again.  We need a way to re-initialize the table once it is made visible again. 


      If the following approach is not correct, how do you suggest hiding tables and making them visible without a need to reload them every time?  I have noticed that the rich faces extended table demo reloads the tables every time (which is not what we need).

      Thank you

      <div id="file1" style="display:none;">

      <ui:include src="/pages/File1.xhtml" />

      </div>

       

      <div id="file2" style="display:none;">

      <ui:include src="/pages/File1.xhtml" />

      </div>

        • 1. Re: RichFaces 3.3.X to 4.2.3 migration and extenededDataTable render issue
          iabughosh

          welcome the the community Kaveh,

          in your case i would suggest using a bean with View or Session scope (to initiate table data once) and use the rendered instead of style to hide UI components :

           

           

          <h:panelGroup rendered="#{yourBean.condition}">

               <ui:inlude src="/pages/File1.xhtml"/>

          </h:panelGroup>

           

          <h:panelGroup rendered="#{not yourBean.condition}">

               <ui:inlude src="/pages/File2.xhtml"/>

          </h:panelGroup>

           

          regards.

          • 2. Re: RichFaces 3.3.X to 4.2.3 migration and extenededDataTable render issue
            kaveh_a

            Thank you for your quick Reply Ibrahim,

            I have eliminated all javascript and pure html.  In The following example I only have RichFaces and I still have the same issue.  In the following example the default tab (file 1) displays properly. Now if I  resize the browser first and then go to tab 2 the extended table in tab 2 (which is orignally empty) looses all its column headers.  Once I do a search in tab2 I know that the data is comming back to the table but it does not get rendered properly. I have tried this in FireFox, IE and Chrome and they all have the same issue.  I like to make visible different files to our users via a menu.  This is first thing they see when they get to this site. I dont have means to trigger and render unless done in pure javascript.

            I work for a very large company and we are willing to pay for a fix/soution.     I will appreciate any help on this issue.

             

            Index.xhtml has the following main tabs, in the following example each file (File1, File2, File3) each have 1 or two extendedData tables.  The users perform a search via a commandButton and then it will populate (render) the data in the table below the button in each page.  RichFaces 3.3.3 does not have this problem.

             

            <rich:tabPanel switchType="client">

            <rich:tab header="TAB 1">

            <ui:include src="/pages/File1.xhtml" />

            </rich:tab>

             

            <rich:tab header="TAB 2">

            <ui:include src="/pages/File2.xhtml" />

            </rich:tab>

             

            <rich:tab header="TAB 3">

            <ui:include src="/pages/File3.xhtml" />

            </rich:tab>

            </rich:tabPanel>

            • 3. Re: RichFaces 3.3.X to 4.2.3 migration and extenededDataTable render issue
              iabughosh

              can you attach some test xhtml & java files to help you get over this ?

              • 4. Re: RichFaces 3.3.X to 4.2.3 migration and extenededDataTable render issue
                kaveh_a

                Hi Ibraham

                I have simplified the project so hopefully you can help me with this issue.  I can also send you the simplified project as the eclipse zipped project and you can build it and deploy it. I could not find any means to attach files here (let me know if that is possible).  Furthermore I have changed all deployment scripts for this project to run in tomcat:

                I have some files below (only xhtml), if you need the entire project please let me know how I can send it to you.


                Thanks,
                Kaveh

                 

                 

                ----MENU FILE: ------

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

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

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

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

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

                      xmlns:c="http://java.sun.com/jsp/jstl/core"

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

                      >

                <h:head>

                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

                <title>RichFaces Bug</title>

                 

                 

                <script type="text/javascript">

                 

                 

                 

                 

                 

                 

                          function doSearchByEnterKey(event, componentId){

                                        var keyCode  =event.keyCode ? event.keyCode : window.event.which ? window.event.which : event.charCode ;

                                        //alert ("Calling doSearchByEnterKey, keycode="+keyCode+", componentId="+componentId);

                                        if (keyCode == 13) {

                                        event.returnValue = false;

                                        event.cancel = true;

                                                var buttonComponent = document.getElementById(componentId);

                                                //alert ("after getting element by id: "+buttonComponent);

                                        buttonComponent.click();

                                                //searchEquipmentFromDropDown();

                                                return false;

                                        }

                                                return true;

                 

                 

                          }

                </script>

                 

                 

                <style type="text/css">

                body

                {

                 

                 

                }

                </style>

                </h:head>

                <h:form>

                 

                    <rich:tabPanel switchType="client">

                        <rich:tab header="Cars">

                            <ui:include src="/pages/Car.xhtml" />

                        </rich:tab>

                 

                 

                        <rich:tab header="Bulidings">

                            <ui:include src="/pages/Building.xhtml" />

                        </rich:tab>

                 

                    </rich:tabPanel>

                </h:form>

                 

                 

                </html>

                 

                ----- -------------------------HERE IS Building.XHTML FILE

                 

                <!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:f="http://java.sun.com/jsf/core"

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

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

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

                      xmlns:c="http://java.sun.com/jsp/jstl/core"

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

                      >

                <h:head>

                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

                <title>RichFaces Bug</title>

                <style type="text/css">

                body

                {

                 

                 

                }

                </style>

                </h:head>

                 

                 

                     

                <body>

                 

                <ui:composition template="/pages/simpleTemplate.xhtml">

                 

                <ui:define name="body">

                                    <h:form id="searchBuildingForm">

                                    <rich:panel id ="buildingSearch" style="background-color:transparent;width:635px">

                                     <rich:hotKey key="return" handler="Event.stop(event);" disableInInput="true" />

                                              <f:facet name="header">

                                <h:outputText value="Search Buildings"/>

                                  </f:facet>

                                               <h:outputText value="Enter Building  Name: " /> 

                                               <h:inputText id="BuildingName" onkeydown="return doSearchByEnterKey(event,'searchSubStnForm:searchSubtationBtn');" >

                            </h:inputText>

                                              <a4j:commandButton id="searchBuildingBtn" value="Search For Building" action="#{buildingBean.populateBuildingList}"

                                                        render="buildingTable," styleClass="button"/>

                                    </rich:panel>

                                     </h:form>

                                    

                 

                           <!--  <h:outputText value="&#160;" /> -->

                 

                 

                 

                          <rich:panel id ="buildingTablePanel" style="background-color:transparent;width:975px">

                          <h:form>

                          <rich:extendedDataTable frozenColumns="1" style="height:220px; width:965px; overflow:scroll;" id ="buildingTable"

                                    value="#{buildingBean.buildingList}" var="buildingDo" selectionMode="single"

                                     selection="#{buildingBean.selection}"

                                    noDataLabel="There are no Buildings associated with given Search criteria." >

                                    <a4j:ajax execute="@form" event="selectionchange"

                                    

                                    />

                 

                                    <f:facet name="header">

                                <h:outputText value="Building Table (list)"/>

                        </f:facet>

                        <rich:column width="175px" style="word-wrap:break-word">

                                <f:facet name="header">

                                          <h:outputText value="Building &lt;br /&gt;Name" escape="false"/>

                                                        </f:facet>

                                        <h:outputText value="#{buildingDo.name}"/>

                        </rich:column>

                        <rich:column width="77px" style="word-wrap:break-word">

                                <f:facet name="header"><h:outputText styleClass="headerText" value="Height"/></f:facet>

                                        <h:outputText value="#{buildingDo.height}"/>

                        </rich:column>

                        <rich:column  width="96px" >

                                <f:facet name="header">

                                                    <h:outputText styleClass="headerText" value="year" escape="false"/>

                                </f:facet>

                                        <h:outputText value="#{buildingDo.year}">

                                                  <f:convertDateTime locale="en_US" type="both" timeZone="CST" pattern="yyyy-MM-dd HH:mm" />

                                        </h:outputText>

                        </rich:column>

                                    <rich:column width="96px">

                                <f:facet name="header">

                                          <h:outputText value="Building &lt;br /&gt; Floors" escape="false"/>

                                                        </f:facet>

                                        <h:outputText value="#{buildingDo.floors}"/>

                        </rich:column>

                                    <rich:column width="58px">

                                <f:facet name="header">

                                          <h:outputText value="Material" escape="false"/>

                                                        </f:facet>

                                        <h:outputText value="#{buildingDo.material}"/>

                        </rich:column>

                 

                </rich:extendedDataTable>

                </h:form>

                </rich:panel>

                 

                </ui:define>

                 

                </ui:composition>

                 

                </body>

                 

                 

                </html>

                 

                 

                ----- -------------------------HERE IS Car.XHTML FILE

                 

                <!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:f="http://java.sun.com/jsf/core"

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

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

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

                      xmlns:c="http://java.sun.com/jsp/jstl/core"

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

                      >

                <h:head>

                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

                <title>RichFaces Bug</title>

                <style type="text/css">

                body

                {

                 

                 

                }

                </style>

                </h:head>

                 

                 

                     

                <body>

                 

                <ui:composition template="/pages/simpleTemplate.xhtml">

                 

                <ui:define name="body">

                                    <h:form id="searchCarForm">

                                    <rich:panel id ="carSearch" style="background-color:transparent;width:635px">

                                     <rich:hotKey key="return" handler="Event.stop(event);" disableInInput="true" />

                                              <f:facet name="header">

                                <h:outputText value="Search Cars"/>

                                  </f:facet>

                                               <h:outputText value="Enter Car  Name: " /> 

                                               <h:inputText id="CarName" onkeydown="return doSearchByEnterKey(event,'searchSubStnForm:searchSubtationBtn');" >

                            </h:inputText>

                                              <a4j:commandButton id="searchCarBtn" value="Search For Car" action="#{carBean.populateCarList}"

                                                        render="carTable," styleClass="button"/>

                                    </rich:panel>

                                     </h:form>

                                    

                 

                           <!--  <h:outputText value="&#160;" /> -->

                 

                 

                 

                          <rich:panel id ="carTablePanel" style="background-color:transparent;width:975px">

                          <h:form>

                          <rich:extendedDataTable frozenColumns="1" style="height:220px; width:965px; overflow:scroll;" id ="carTable"

                                    value="#{carBean.carList}" var="carDo" selectionMode="single"

                                     selection="#{carBean.selection}"

                                    noDataLabel="There are no Cars associated with given Search criteria." >

                                    <a4j:ajax execute="@form" event="selectionchange"

                                    

                                    />

                 

                                    <f:facet name="header">

                                <h:outputText value="Car Table (list)"/>

                        </f:facet>

                        <rich:column width="175px" style="word-wrap:break-word">

                                <f:facet name="header">

                                          <h:outputText value="Car &lt;br /&gt;Name" escape="false"/>

                                                        </f:facet>

                                        <h:outputText value="#{carDo.name}"/>

                        </rich:column>

                        <rich:column width="77px" style="word-wrap:break-word">

                                <f:facet name="header"><h:outputText styleClass="headerText" value="Make"/></f:facet>

                                        <h:outputText value="#{carDo.make}"/>

                        </rich:column>

                        <rich:column  width="96px" >

                                <f:facet name="header">

                                                    <h:outputText styleClass="headerText" value="year" escape="false"/>

                                </f:facet>

                                        <h:outputText value="#{carDo.year}">

                                                  <f:convertDateTime locale="en_US" type="both" timeZone="CST" pattern="yyyy-MM-dd HH:mm" />

                                        </h:outputText>

                        </rich:column>

                                    <rich:column width="96px">

                                <f:facet name="header">

                                          <h:outputText value="Car &lt;br /&gt; Model" escape="false"/>

                                                        </f:facet>

                                        <h:outputText value="#{carDo.model}"/>

                        </rich:column>

                                    <rich:column width="58px">

                                <f:facet name="header">

                                          <h:outputText value="Condition" escape="false"/>

                                                        </f:facet>

                                        <h:outputText value="#{carDo.condition}"/>

                        </rich:column>

                 

                </rich:extendedDataTable>

                </h:form>

                </rich:panel>

                 

                </ui:define>

                </ui:composition>

                </body>

                </html>

                • 5. Re: RichFaces 3.3.X to 4.2.3 migration and extenededDataTable render issue
                  kaveh_a

                  here is the simpleTemplate file:

                   

                  <!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:ui="http://java.sun.com/jsf/facelets">

                  <h:head>

                  </h:head>

                   

                  <h:body>

                  <div align="left">

                  <ui:insert name="body">Default Body</ui:insert>

                  </div>

                   

                  </h:body>

                  </html>

                  • 6. Re: RichFaces 3.3.X to 4.2.3 migration and extenededDataTable render issue
                    iabughosh

                    hello Kaveh,

                    I would prefer the entire simplified project, you can share it on Dropbox, 4shared or Github.

                     

                    Thank you.

                    • 7. Re: RichFaces 3.3.X to 4.2.3 migration and extenededDataTable render issue
                      kaveh_a

                      Here you go Ibrahim, it is a zipped file.  you need to import it in eclipse as File/Import/General/ArchiveFile.  Once you have the project in eclipse please click on the pom.xml and do run as maven build (clean install).  I had to ask a friend to put this project on drop box since at work the proxy does not allow me to acces drop box. Please let me know if you run to any issues.

                      Thank you again for all your follow ups,

                      • 8. Re: RichFaces 3.3.X to 4.2.3 migration and extenededDataTable render issue
                        iabughosh

                        unfortunately the link is broken .

                        • 9. Re: RichFaces 3.3.X to 4.2.3 migration and extenededDataTable render issue
                          kaveh_a

                          The link was up until late (mid night last night).  I will see if I can make  it available to you again

                           

                           

                          I was able to attach it here.  I founnd out if you post first and then do edit you can attach files in this website. (see attached)

                          • 10. Re: RichFaces 3.3.X to 4.2.3 migration and extenededDataTable render issue
                            iabughosh

                            Hello Kaveh A,

                            I've solved your problem by doing the following :

                            1- in your extendedDataTable i've done the following:

                                 a-for cars table :<rich:extendedDataTable frozenColumns="#{empty carBean.carList ? 5 : 1}" ....>

                                 b-for buildings table :<rich:extendedDataTable frozenColumns="#{empty buildingBean.buildingList ? 5 : 1}" ....>

                            2- in your web.xml    

                                <context-param>

                                    <param-name>org.richfaces.resourceOptimization.enabled</param-name>

                                    <param-value>false</param-value>

                                </context-param>

                             

                            it seems that extended dataTable have some problems with frozenColumns and resourceOptimization.

                             

                            if it worked fine with you please open a RichFaces JIRA for this.

                             

                            best regards.

                            • 11. Re: RichFaces 3.3.X to 4.2.3 migration and extenededDataTable render issue
                              kaveh_a

                              Thank you for confirming that this is a defect.

                              I have created

                              https://issues.jboss.org/browse/RF-12682

                               

                              1) Regardless of whether or not we have the frozenColumns this issue still exists.

                              2) I noticed that it only renders the frozenColumns. Meaning that if I set to forzenColumns to 3 only 3 columns are rendered and the non frozenColumns are not rendered.

                              3) I tried your fix and the table styling and column header look funny.

                              4) I am not sure but this may be a styling issue

                              5) we have many tables without frozenColumns, all of which will have this problem and data is not rendered.

                              6) finally this issue is not just specific to rich:tabPanel and extendedDataTable.  This issue exists anytime an empty extendedDataTable is hidden (when the page loads) and then later it is made visible.

                              • 12. Re: RichFaces 3.3.X to 4.2.3 migration and extenededDataTable render issue
                                iabughosh

                                hello kaveh,

                                3) I tried your fix and the table styling and column header look funny.

                                can you attach an image showing this ?.

                                • 13. Re: RichFaces 3.3.X to 4.2.3 migration and extenededDataTable render issue
                                  kaveh_a

                                  Hi Ibrahim

                                  Please see attached.  Note the line around Height, year and Material column header.  Note that the styling is not a big issue at the moment.  The major issue for us is not being able to see data in tables without forzenColumns.  I noticed that the browser resizing also impacts this issue. Therefore there seems to be something with table render during initialization (when the page loads for the table that are not visible in the other tabs). What is the likely hood of this defect getting fixed?

                                  tableHeader.jpg

                                  • 14. Re: RichFaces 3.3.X to 4.2.3 migration and extenededDataTable render issue
                                    iabughosh

                                    could you try RichFaces M3, it seems that they solve your bug.

                                    1 2 Previous Next