Listgrid paging

[kens107]

I want an working example of progressive paging (scrollbar paging) with 5 records as on a screen with scrollbar on screen, when I move scrollbar at the bottom,next 5 records should fetch automatically,
I am trying with this example
<script>

isc.ListGrid.create({
ID: "countryList",width:widthpix,height:100, alternateRecordStyles:true, showAllRecords:false,top:toppix,left: leftpix,dataSource: countryDS,showFilterEditor: false})

isc.ResultSet.create({dataSource : countryDS,ID:"resultSet",autoFetchData: true,cachedRows : 0,fetchAhead : true,resultSize : 5,fetchDelay : 0,useClientFiltering:true,useClientFiltering:true,updateCacheFromRequest:true,updatePartialCache:true})

function fetch() {
countryList.setData(resultSet);
}
fetch();

</script>

[Isomorphic]

The simplest way to approach this would probably be to observe() the scrolled() notification on the ListGrid's body (accessible as gridID.body after draw), check whether the visible rows include the last row of the dataset, and if the last row is visible, call setFullLength() on the ResultSet and kick off the fetch by calling getRange() on the ResultSet as well.

Note that setFullLength() is not currently documented, but should be a stable API.

[kens107]

gridID.body

I have tried with countryList.body.scrolled to get the event, unable to capture the scrollbar event and also to fetch the next recordset for paging.
WIll be great if you can help me with code.

[Isomorphic]

Hi kens107,

Here's working example code. This requires the "supplyItem" example DataSource to have been loaded.

isc.ResultSet.create({
    ID:"resultSet",
    dataSource:"supplyItem",
    // replace with first five rows, eg, via dataSource.fetchData() call
    initialData: [],
    initialLength:5,
    resultSize:5,
    // avoid the totalRows ever being set to the actual dataset size
    transformData : function (newDate, dsResponse) {
       dsResponse.totalRows = this.getLength();
    },
    updateLength : function () {
        this.logWarn("scrolled fired, visibleRows: " + listGrid.getVisibleRows());
        var currentLength = resultSet.getLength(); 
        if (listGrid.getVisibleRows()[1] >= currentLength-1) {
            resultSet.setFullLength(currentLength + 5);
            resultSet.getRange(currentLength, currentLength + 5);
       }
    }
})

isc.ListGrid.create({
    ID:"listGrid",
    width:500,
    data:resultSet
})

resultSet.observe(listGrid.body, "scrolled", "observer.updateLength()");

[kens107]

Paging with tree grid

Example is working fine, thanks for that, can we use this under Tree grid, also how can I format the parrent row, as my requirement is I want Tree grid with paging effect, my tree grid contains 3 parents with multiple childs, parent will contain long text (text should not wrap)so need the colspan for the row which holds parent data, and child element having multiple columns.

Again will be great if I can get some sample code.

[Isomorphic]

Hi kens107,

The approach with a TreeGrid would be a bit different, probably based on creating a Tree data model and calling dataSource.fetchData() directly when the user scrolls to the bottom.

The same formatter APIs that are available on the ListGrid are available on the TreeGrid, such as formatCellValue.

[kens107]

sort event

Progress loading is working excellent in List grid , but when I sort the data with any filed, it wount work and I get all data, can I know the events for sorting, so that I can call my resultset so that I will have only 5 rows even on sort event.
COrrect me if I am wrong with this approch.

[Isomorphic]

Clicking on a header to sort calls listGrid.sort(), which then calls resultSet.sortByProperty().