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.