12 Replies Latest reply on Apr 26, 2012 9:05 AM by jasonhendriks

    rich:dataTable performance issues.

    ggoyal

      I have a rich:dataTable with around 400 rows and 11 columns.  It takes 30 seconds for the table to load.  Any views on how to improve its performance?

        • 1. Re: rich:dataTable performance issues.
          iabughosh

          even if it is 400 rows, it shouldn't take this much time !!, what is your RF version ?, please post a snippet of your bean & .xhtml code.

          • 2. Re: rich:dataTable performance issues.
            healeyb

            Hmmm, that's a long time. Database access in the getters? we will see.

            • 3. Re: rich:dataTable performance issues.
              sandy4you

              Hi Garima,

               

              If you really interested in improving the performance then I would suggest to use Pagination using some sort of QueryDTO to query the number of records on the current view from the Back-End.

              for e.g create a abstract class PageableDataModel like PageableDataModel<T extends Serializable, U extends Serializable> extends ExtendedDataModel.

              Overrides the method as per needs.

               

              Cheers,

              Sandy

              • 4. Re: rich:dataTable performance issues.
                ggoyal

                RF version is 3.3.3 Final.  The performance increases a lot if i use h:dataTable instead of rich:dataTable, but then i cant use the rich:columnGroup.

                 

                snippet of xhtml is as below:

                 

                <rich:dataTable cellpadding="0" cellspacing="0" width="100%" value="#{mainVos}" var="ddd" border="0" headerClass="tableHeader" id="mainTable">
                     <f:facet name="header">
                          <rich:columnGroup>
                               <rich:column rowspan="3" sortable="false">
                                    <h:outputText value="aaa" />
                               </rich:column>
                              <rich:column rowspan="3" width="109px;" rendered="#{!display}" sortable="false">
                                    <h:outputText value="bbb" />
                              </rich:column>
                              <rich:column rowspan="3" width="82px;" rendered="#{display}" sortable="false">
                                    <h:outputText value="ccc" />
                              </rich:column>
                              <rich:column rowspan="3" width="228px;" rendered="#{display}" sortable="false">
                                    <h:outputText value="eee" />
                              </rich:column>
                              <rich:column rowspan="3" width="251px;" rendered="#{!display}" sortable="false">
                                    <h:outputText value="fff" />
                              </rich:column>
                              <rich:column colspan="4" sortable="false">
                                    <h:outputText value="ggg" />
                              </rich:column>
                              <rich:column colspan="2" rendered="#{!display}" sortable="false">
                                    <h:outputText value="hhh" />
                              </rich:column>
                              <rich:column colspan="2" rendered="#{!display}" sortable="false">
                                    <h:outputText value="iii" />
                              </rich:column>
                              <rich:column breakBefore="true" colspan="2" sortable="false">
                                    <h:outputText value="jjj" />
                              </rich:column>
                              <rich:column colspan="2" sortable="false">
                                    <h:outputText value="kkk" />
                              </rich:column>
                              <rich:column colspan="2" rendered="#{!display}" sortable="false">
                                    <h:outputText value="lll" />
                              </rich:column>
                              <rich:column colspan="2" rendered="#{!display}" sortable="false">
                                    <h:outputText value="mmm" />
                              </rich:column>
                              <rich:column breakBefore="true" width="71px;" sortable="false">
                                    <h:outputText value="nnn" />
                              </rich:column>
                              <rich:column width="70px;" sortable="false">
                                    <h:outputText value="ooo" />
                              </rich:column>
                              <rich:column width="68px;" rendered="#{!display}" sortable="false">
                                    <h:outputText value="ppp" />
                              </rich:column>
                              <rich:column width="69px;" rendered="#{display}" sortable="false">
                                    <h:outputText value="qqq" />
                              </rich:column>
                              <rich:column width="67px;" rendered="#{display}" sortable="false">
                                    <h:outputText value="rrr" />
                              </rich:column>
                             <rich:column width="70px;" rendered="#{!display}" sortable="false">
                                    <h:outputText value="sss" />
                              </rich:column>
                              <rich:column width="60px;" rendered="#{!display}" sortable="false">
                                    <h:outputText value="ttt" />
                              </rich:column>
                              <rich:column width="65px;" rendered="#{!display}" sortable="false">
                                    <h:outputText value="uuu" />
                              </rich:column>
                              <rich:column width="109px;" rendered="#{!display}" sortable="false">
                                    <h:outputText value="vvv" />
                              </rich:column>
                              <rich:column width="112px;" rendered="#{!display}" sortable="false">
                                    <h:outputText value="www" />
                              </rich:column>
                         </rich:columnGroup>
                       </f:facet>
                       <rich:column style="vertical-align: top;" sortable="false">
                             <h:outputText value="#{ddd.name}" />
                       </rich:column>
                       <rich:column colspan="11" style="border: none; padding: 0px;" sortable="false">
                             <rich:dataTable var="name" value="#{ddd.nameVos}" width="100%" style="border: none;">
                                   <rich:column width="83px" styleClass="column" sortable="false">
                                         <h:outputText value="#{name.nameName}" />
                                   </rich:column>
                                   <rich:column style="border: none; padding: 0px;" sortable="false">
                                         <rich:dataTable var="item" value="#{name.detailVos}" width="100%" style="border: none;" height="100%">
                                               <rich:column width="153px" style="padding: 4px 4px 4px 4px;" sortable="false">
                                                     <h:outputText value="#{item.description}" />
                                               </rich:column>
                                               <rich:column width="47px" style="#{item.style}; padding: 4px 4px 4px 4px;" sortable="false">
                                                     <h:inputText rendered="#{!item.disabled}" style="width: 35px;#{item.style}" onblur="validate()">
                                                           <f:convertNumber type="number" groupingUsed="true" maxFractionDigits="2" minFractionDigits="2" />
                                                    </h:inputText>
                                                     <h:inputText style="width: 40px; border: none; background-color: #E8E8E8; font-size: 11px" readonly="true" rendered="#{item.disabled}">
                                                           <f:convertNumber type="number" groupingUsed="true" maxFractionDigits="2" minFractionDigits="2" />
                                                     </h:inputText>
                                               </rich:column>
                                               <rich:column style="#{item.style}; padding: 4px 4px 4px 4px;" width="45px" sortable="false">
                                                     <h:inputText rendered="#{!item.disabled}" style="width: 35px;#{item.style}" onblur="validate()">
                                                           <f:convertNumber type="number" groupingUsed="true" maxFractionDigits="2" minFractionDigits="2" />
                                                     </h:inputText>
                                                     <h:inputText value="" rendered="#{item.disabled}" style="width: 35px; border: none; background-color: #E8E8E8; font-size: 11px" readonly="true">
                                                           <f:convertNumber type="number" groupingUsed="true" maxFractionDigits="2" minFractionDigits="2" />
                                                     </h:inputText>
                                               </rich:column>
                                               <rich:column style="#{item.style}; padding: 4px 4px 4px 4px;" width="45px" sortable="false">
                                                     <h:inputText value="" rendered="#{!item.disabled}" style="width: 35px;#{item.style}" onblur="validate()">
                                                           <f:convertNumber type="number" groupingUsed="true" maxFractionDigits="2" minFractionDigits="2" />
                                                     </h:inputText>
                                                     <h:inputText value="" rendered="#{item.disabled}" style="width: 35px; border: none; background-color: #E8E8E8; font-size: 11px" readonly="true">
                                                           <f:convertNumber type="number" groupingUsed="true" maxFractionDigits="2" minFractionDigits="2" />
                                                     </h:inputText>
                                               </rich:column>
                                               <rich:column style="#{item.style}; padding: 4px 4px 4px 4px;" width="43px" sortable="false">
                                                     <h:inputText value="#{}" rendered="#{!item.disabled}" style="width: 35px;#{item.style}" onblur="validate()">
                                                           <f:convertNumber type="number" groupingUsed="true" maxFractionDigits="2" minFractionDigits="2" />
                                                     </h:inputText>
                                                     <h:inputText value="#{}" rendered="#{item.disabled}" style="width: 35px; border: none; background-color: #E8E8E8; font-size: 11px" readonly="true">
                                                           <f:convertNumber type="number" groupingUsed="true" maxFractionDigits="2" minFractionDigits="2" />
                                                     </h:inputText>
                                               </rich:column>
                                               <rich:column style="#{item.style}; padding: 4px 4px 4px 4px;" width="42px" rendered="#{!display}" sortable="false">
                                                     <h:outputText value="0" rendered="#{item.disabled}" style="width: 35px; border: none; background-color: #E8E8E8; font-size: 11px"/>
                                               </rich:column>
                                               <rich:column style="#{item.style}; padding: 4px 4px 4px 4px;" width="42px" rendered="#{!display}" sortable="false">
                                                     <h:outputText value="0" rendered="#{item.disabled}" style="width: 35px; border: none; background-color: #E8E8E8; font-size: 11px"/>
                                               </rich:column>
                                               <rich:column style="#{item.style}; padding: 4px 4px 4px 4px;" width="66px" rendered="#{!display}" sortable="false">
                                                     <a4j:region renderRegionOnly="true" >
                                                           <h:inputText id="new" value="#{item.new}" style="width: 55px; font-size: 11px;#{item.style}" disabled="#{item.disabled}" ajaxSingle="true" onblur="validate()">
                                                                 <f:convertNumber type="number" groupingUsed="true" maxFractionDigits="2" minFractionDigits="2" maxIntegerDigits="10" />
                                                           </h:inputText>
                                                     </a4j:region>
                                               </rich:column>
                                               <rich:column style="#{item.style}; padding: 4px 4px 4px 4px;" width="64px" rendered="#{!display}" sortable="false">
                                                     <a4j:region renderRegionOnly="true">
                                                           <h:inputText id="old" value="#{item.old}" style="width: 55px; font-size: 11px;#{item.style}" disabled="#{item.disabled}" ajaxSingle="true" onblur="validate()">
                                                                 <f:convertNumber type="number" groupingUsed="true" maxFractionDigits="2" minFractionDigits="2" maxIntegerDigits="10" />
                                                           </h:inputText>
                                                     </a4j:region>
                                               </rich:column>
                                         </rich:dataTable>
                                   </rich:column>
                             </rich:dataTable>
                       </rich:column>
                </rich:dataTable>

                • 5. Re: rich:dataTable performance issues.
                  ggoyal

                  I cannot add pagination due to client requirement.

                  • 6. Re: rich:dataTable performance issues.
                    healeyb

                    Can you show us the backing bean code related to value="#{mainVos}". I've not seen a bean name used without a property

                    in this context before, so this needs to be looked at.

                     

                    Regards,

                    Brendan.

                    • 7. Re: rich:dataTable performance issues.
                      ggoyal

                      I have used richfaces with spring.  So the bean data comes from an xml.  So I can use it in this manner.  The list is populated properly and the data is visible, the only problem is the rendering time.

                      • 8. Re: rich:dataTable performance issues.
                        healeyb

                        Ok, the main thing is to ensure that you're not accessing the database from your getters. The getters should be standard

                        IDE generated getters, because they are called more than you'd like. The model to use is to have a preRenderView event

                        on page load, that calls a method such as reloadMyDatatable(). Then whenever you make any modifications to the table

                        call reloadMyDatatable(). This also avoids hitting OptimisticLockExceptions.

                         

                        Regards,

                        Brendan.

                        • 9. Re: rich:dataTable performance issues.
                          ggoyal

                          My list is populated when the user clicks on the tabs.  The getters only return the pre populated list.  There are no db calls.  And my java method returns in 5-10 seconds.  The whole remaining time is taken by the browser to load the table.

                          • 10. Re: rich:dataTable performance issues.
                            jasonhendriks

                            Garima are you using Internet Explorer? We see the same issue in IE 7, but not Safari or Firefox.

                            • 11. Re: rich:dataTable performance issues.
                              ggoyal

                              Yes I am using IE 7 & 8.  What did you do to resolve the issue?

                              • 12. Re: rich:dataTable performance issues.
                                jasonhendriks

                                It's clear that it is a browser issue because when the the Eclipse debugger exits, Firefox builds the page in less than a second, while IE still has nothing to show for 40+ seconds or more.

                                 

                                We were not able to resolve the issue. Fortunately, our user base is known and on the small side, so we could dictate to our users that they must install a modern browser for best performance. In that case we display 500 rows of data in our tables per page, a healthy amount. For the IE holdouts, I wrote a script to detect if they are running IE at login, and if they are, we reduce the maximum table rows displayed to 50 for all pages, and show a warning.

                                 

                                If Firefox/Safari had not been an option, I think I would have just scrapped rich:dataTable for a regular HTML table with a JQuery table sorter (something from http://www.noupe.com/javascript/jquery-html-table-toolbox.html).

                                1 of 1 people found this helpful