Scroll at bottom of rich:scrollableDataTable

[lfryc]

I'm working on Jabber client sample using RichFaces.

I decided to use rich:scrollableDataTable, since there is no need for storing whole history of chat at client-side.

The history of chat is traditionally displayed from ascendant by date manner and I want that habit follow too.

I require to:

1. check if table is actually at the bottom before re-rendering (some JS call onbeforedomupdate)

2. if table was at bottom, rerender and scroll automatically down to the bottom (some JS call oncomplete)

Is there way to control the table via API or regular JS to scroll it down to the bottom?

[konstantin.mishin]

ScrollableDataTable hasn't API for it. You can get/change "scroll state" of table using scrollTop property of DIV-element with id={idOfScrollableDataTable} + ":scb". For exemple:

document.getElementById("j_id353:carList:scb").scrollTop 

[lfryc]

Thanks for reply, Konstantin - it drivers me on the right way.

But can you also advice me how to get actual maximal scroll height of scrollableDataTable?

I found that it can be obtained like:

document.getElementById("j_id353:carList:scb").scrollHeight

But when I scroll at bottom, scrollTop=2160 and scrollHeight=2520.

[konstantin.mishin]

As I think, should be : scrollHeight = clientHeight + scrollTop

[kragoth]

Just in case you run into the same problem that I had. Under certain circumstances the scrollHeight = clientHeight + scrollTop does not quite scroll all the way to the bottom. You end up with the lasts row only partially visible.

function autoScrollToBottomAllRequiredTables() {
     jQuery("tr:last", jQuery(".autoScrollToBottom"))
          .each(
               function(){
                    jQuery(this).parents("div:first").animate({scrollTop: jQuery(this).eq(0).offset().top-100},100);
               });
}

That jquery function might help you if you run into this problem. Hopefully you don't