ExtendedDataTable Vs DataTable

I am currently using Richfaces 3.3.1 with in my seam application and here are few things related to ExtendedDataTable that are worth sharing.

If you are working with a simple Data Iteration(table) with say 5 columns of data, the rendering times for ExtendedDataTable(EDT) and DataTable(DT) appear to be similar. In this particular case using EDT gives you the biggest bang for the buck with all the functionality that comes with it. But, as the number of columns of data in your table increase the performance become more of an issue. Let me explain...

In the application I am working on, we have a screen that is critical part of the whole application and usecases have shown that the user will spend majority of their time on this screen. The screen contains a table with about 18 columns of critical data. The user is allowed to sort, launch some actions from the context menu etc. None of the fancy stuff like the 'grouping' or re-arranging of columns etc. (For the time being, until we have some more scope creep)

We are currently in the performance enhancement phase of development and I noticed that converting the screen from EDT to DT with pretty much the same functionality reduced the rendering time of the table by almost half. I did this using FireFox console output feature that will output to FireBug console. This is the best way I have found to check the elapsed time of different parts of the screen. I am planning to cover FireBug debugging in a different blog post.

To give you some numbers;

• EDT render time 1612 ms and DT render time for the same data 916 ms. That is pretty significate when you are talking screen delay, especially if you have to deal with KPI's like we do.
  
• Some actions on the screen just refresh the list or table using the Ajax "reRender" attribute available. This happens to update "Status" of a row lets say and the re-rendering times for this EDT 600ms and DT 200ms.

So, if you

• Need the extra features offered by ExtendedDataTable like "Group By" or "reorder columns" etc
  
• Displaying a small number of columns
• Not a heavy usage screen

Then go ahead and use ExtendedDataTable's.
Else, stick with DataTable's for the time being.

When and if I try the latest build of Richfaces and notice any significant improvement from EDT, I will do a follow up to this post.

If any of you have found better ways to handle this issue of EDT or other performance improvements that can be attained, please share.

Scrolling for RichFaces ExtendedDataTable

For those who are not familiar, RichFaces is a UI/Ajax component for JSF applications. The latest version of RichFaces is 3.3.1 (at the time of writing this post).

If you work on Web application a lot, you often have to create a table with content, for example: list of results for a search or list of items in inventory etc. Among the several options that are available via richfaces for this purpose, one of the newest is a Extended Data Table. Extended Data Tables are very useful and have several features built-in like sorting, grouping and column re-order, just to name a few. All of this is does mostly on the clientside, using JavaScript from jQuery and other javascript packages.

One of the main drawbacks of this component Extended Data Table is scrolling. You can scroll vertically, but not horizontally, so if you have more columns than can fit on your screen realestate, then you are out of luck. The extra columns will be hidden and you cannot see them, unless you rearrange or remove some columns that are currently in view.

I am not sure, if someone has a more eligent solution for this, or if RichFaces group is working on fixing this issue, but I have figured out a javascript/jQuery resolution for this issue. The following javascript function that will enable scrolling on ExtendedDataTable.

in seam application

/**
* CSS manuplation to enable horizontal and vertical
* scrolling on RichFaces Extended Date Table.
* @return
*/
function enableEDTScrolling() {
var selector = ".extdt-outerdiv";
try {selector = eval(".extdt-outerdiv");} catch (e) {}
jQuery(selector).css("overflow", "auto");
}


in other jsf

/**
* CSS manuplation to enable horizontal and vertical
* scrolling on RichFaces Extended Date Table.
* @return
*/
function enableEDTScrolling() {
var selector = ".extdt-outerdiv";
try {selector = eval(".extdt-outerdiv");} catch (e) {} $(selector).css("overflow", "auto");
}


And invoke the function at the end of your page like surrounded by the normal javascript script tags.

enableEDTScrolling();


Useful links that I found related to richfaces:

LiveDemo - Good live demostrations of richfaces components with code examples and notes.

Source Code for the Live Demo web site - I find this very useful when I am trying to figure out how it done with backend etc.