12 Replies Latest reply: Apr 26, 2012 9:05 AM by Jason Hendriks RSS

rich:dataTable performance issues.

garima goyal Newbie

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 Master

    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.
    Brendan Healey Master

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

  • 3. Re: rich:dataTable performance issues.
    Sandeep Singh Newbie

    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.
    garima goyal Newbie

    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.
    garima goyal Newbie

    I cannot add pagination due to client requirement.

  • 6. Re: rich:dataTable performance issues.
    Brendan Healey Master

    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.
    garima goyal Newbie

    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.
    Brendan Healey Master

    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.
    garima goyal Newbie

    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.
    Jason Hendriks Newbie

    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.
    garima goyal Newbie

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

  • 12. Re: rich:dataTable performance issues.
    Jason Hendriks Newbie

    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).