Detect scroll bar is at top bottom

Tried these without success

oGrid.getScrollTop() == oGrid.getScrollHeight() // false
oGrid.getPanelHeight() // 0
oGrid.getContentHeight() // 0

Beyond the solution, what is the rationale to find it?

The size is calculated after the grid is written to the page, so you need some timeout before reading the size. You should use getScrollTop(), getScrollHeight() and getContentHeight("total") for the actual size of the full content area (header, rows, footer, scrollbars).

You may also look at /source/lib/grid/_overflow.js

Here is an example -

obj.onScrollTopChanged = function(){

    var distanceToBottom = 1,
        scrollTop = this.getScrollTop(),
        scrollHeight = this.getScrollHeight(),
        scrollVisible = this.getScrollBars(),
        scrollBarHeight = (scrollVisible == 'horizontal' || scrollVisible == 'both') ? AW.sy : 0,
        contentHeight = this.getContentHeight('total');

    if (scrollHeight + scrollBarHeight - scrollTop - contentHeight <= distanceToBottom){
        console.log('end of scroll');
    }
};

Thanks Alex

Hi Alex,

The solution you suggested works fine when moving to the last row scrolls the rows down. However, if rows are already scrolled down to the max., moving between the last and the one-before-last row does not seem to trigger in the above code snippet

console.log('end of scroll');

Here is what I'm looking at: when first or last row is current, hitting the up or down arrow key triggers an event. On that event, we'll load the previous/next page in the grid.

Here is a public testable URL: http://foxincloud.com/tutotest/eventlog.tuto

this provides a reference to the aw grid object:

var obj = $('eventlog_scx-grd-grd').oGrid

here is a screenshot: ftp://foxincloud.com/Screenshots/FiC/aw.grid.lastRow.png

Thanks in advance,

In this case you should look at selection change and keyboard events, not scrolling. You can listen to onCurrentRowChanged event to find when the current row changes.

var index = grid.getCurrentRow();
var position = grid.getRowPosition(index);
var count = grid.getRowCount();

If position == 0 then you are at the first row. If position == count-1 then it is the last one. At this point you should also listen to keyboard events to get up/down keys.

successfully implemented in:
http://foxincloud.com/tutotest/eventlog.tuto

grid paged on server side:
- when user attemps to move beyond the last row, the next page loads from the server automatically
- supports 'home' and 'bottom' keys