4 Replies Latest reply on Jun 5, 2008 1:10 PM by rulinsun

    ScrollableDataTable performance

    lessard

      Hi all,

      I've been using the rich:scrollableDataTable to display plain "dummy" ~ 600 by 12 tables (i.e. ArrayList of PersonInfo object) and I had serious performance issues in the browser. Both IE & FireFox take 100 % CPU for up to 2 minutes just to display the table and both browsers gave me popups saying that there is a script that causes the browser to run slowly. Also, sorting is almost impossible.

      I tried to display the same data with the rich:dataTable component(sortable\not sortable and with\without rich:dataScroller)
      and I did not have any performance issues.

      Is there a way to improve the performance of this component (besides using hideWhenScrolling)? If not, any future plans to improve performance of this component? What could cause such a "sluggish" performance compared to the plain dataTable ? (what's the point of using a scrollable component if you can only show a few items?). :(

      Besides that component ... I'm really impressed with this framework

      Regards

      Environment:

      RichFaces 3.1.14 & 3.2.0
      Myfaces 1.1.5 & 1.2.2
      tomcat 5.5.26 & 6.0.16
      IE6, IE7, FireFox 2.0.0.13


        • 1. Re: ScrollableDataTable performance
          ilya_shaikovsky

          Seems we need some works in order to full code review to improve behaviour of ths componetn in general. With all the bugs reported this component should be reinvestigated in general rather than just fixed.. :)

          Please be patient.

          • 2. Re: ScrollableDataTable performance
            andym77

            Hi all,

            We too have been struggling with the scrollableDataTable performance. What we have noticed is for an average of 200 rows loaded, it takes approximately the following times on each browser platform to select each row

            IE7 ~5secs
            Firefox 2.0.0.13 - 2.5secs
            Firefox 3beta5 <1sec

            Seems that the javascript optimisations on Firefox 3 really help this component. However, our users target platform is IE7 and not flexible, shame!

            Any timescales on the re-factoring of this component, otherwise has anyone successfully implemented rich:dataTable with similar functionality, in particular we are looking for row selection and keyboard navigation..?

            regards,

            andym

            • 3. Re: ScrollableDataTable performance

              We found a way to improve the performance of scrollableDataTable for the large dimension table. It's not elegant but works.

              In our application, we have a table with 88 columns and thousand rows. When I set the rows=18, the time of initial display for table is ok, but the scrolling and sorting take about 6 seconds. I did some tests and found the performance basically depended on the number of columns. So I defined a wrap field in the data bean which returns a html string which combined all the fields after the frozenColumn. Something like:


              public String getWrapperField() {
               if(wrapperField ==null){
               StringBuffer strBuf = new StringBuffer("<table width=\"9000\" border=0 cellspacing=0 cellpadding=0><tr>" );
               strBuf.append("<td width=\"100\" class=\"wrapper\">");
               strBuf.append(getField1());
               strBuf.append("</td><td width=\"100\" class=\"wrapper\">");
               strBuf.append(String.format("%1$12.0f", getField2()));
               strBuf.append("</td><td width=\"100\" class=\"wrapper\">");
               ...
              
               wrapperField = strBuf.toString();
               }
               return wrapperField;
              }

              With this field, I am able to reduce scrollableDataTable from 88 columns to 4 columns.
              Of cause you have define corresponding head for the combined field in the xhtml, something like:

              <rich:column width="9000">
              <f:facet name="header">
              <h:outputText escape="false"
               value="<table width=9000 border=0 cellspacing=0 cellpadding=0><tr>
               <td width='100' class='wrapperHeader'>Header1</td>
               <td width='100' class='wrapperHeader'>Header2</td>
               ..."/>
              </f:facet>
              <h:outputText escape="false" value="#{detailEntry.wrapperField}" />
              </rich:column>



              If you define right CSS for wrapper/wrapperHeader, the table will looks exact like the way without column combination.

              The next thing is that resolve the sorting for those combined column. This was what I did:
              1) Implenents the comparable method in the databean.
              2) Define a compareFieldName in databean, then use java reflection to find the field and type, return corresponding result in compareTo().
              3) Define a dropdown menu include all fields of databean to choose which field to be sorted and two buttons for ascending and descending sorting.
              4) Implements to method for sorting in controller.

              After those changes, the time for scrolling reduces to < 1 second, and sorting is even better. The only problem is that if the number of item in datalist is less than the row number define for scrollableDataTable, the vertical grid lines can't be displayed. But most case, I have hundreds or thousands rows, this is not big problem.



              • 4. Re: ScrollableDataTable performance very very good

                We just loaded data with 18639 rows for 88 columns, after this change, the scrolling is almost no any delay. I wander if the RichFaces team can do something to treat each row as two cells (frozen columns and rest columns) when update html content after ajax call for scrolling.