Issue with Large Data Grid Pagination - Scroll Bar Not Triggering Next Page Fetch

[ramireza]

Hi everyone,

I'm facing an issue with a large data grid in my application. Here's what's happening:

• The initial request is sent correctly with the parameters startRow: 0 and endRow: 500.
• The server responds as expected with the correct values for startRow, endRow, and totalRows.
• However, when I scroll down the grid, the scroll bar moves to the end, but the grid does not send a request to fetch the next set of rows.

It seems like the grid is not aware that there are still more records to load, even though the server's totalRows value indicates additional data is available.

Question:
How can I make the grid aware that it needs to paginate further and trigger fetch requests when scrolling?

Any help or suggestions would be greatly appreciated!


Version:
SmartClient Ajax RIA system
Version v12.0p_2020-08-08/PowerEdition Deployment (2020-08-08)

Grid:
function createMyGridList() {

  return isc.CustomListGrid.create({

    ID: "myGridList",

    allowRowSpanning: true,

    height:"100%",

    dataSource: "exampleGrid",

    dataProperties: { fetchMode: "paged", progressiveLoadingThreshold: 250, virtualScrolling: true },

    dataFetchMode: "paged",

    dataPageSize: 500,

    drawAllMaxCells:0,

    progressiveLoading:true,

    showAllRecords: false,

    loadingMode: "paged",

    infiniteScrolling: true,

    virtualScrolling: true,

    fixedRecordHeight: true,  

    bypassCache: true,

    //invalidateCache: true,

    pagingMode: "server",

    drawAheadRatio: 1,

    showFilterEditor: true,

    canHover: true, showHover: true,

    //useAllDataSourceFields:false,

    canEdit: true,

    editByCell: true,

    canEdit: true,

    editEvent: "none",

    autoSaveEdits: false,

    saveByCell: false,

    showRollOver: false,

    showGridSummary: true,

    canDragRecordsOut: false,

    productType: "",

    productSubType: "",

    width: "100%",

    selectionType: "multiple",

   

    getFilteredData: function() {

    },

   

    dataArrived: function() {

      loadTotalRows(eval("TotalRows"), eval("myGridListt"));

      //console.log("Total rows in data arrived: ", loadTotalRows(eval("TotalRows"), eval("myGridList")));

      var totalRows = this.getTotalRows();

      if(totalRows !== undefined){

        this.setTotalRows = totalRows;

        console.log("Total rows in data arrived: ",totalRows );  

      }

      

       this.Super("dataArrived", arguments);

    },

Datasource:
<DataSource

ID="exampleGrid"

  serverConstructor="exampleGridDataSource"

showPrompt="false"

>

<fields>

   <field name="Id" title=" Id" primaryKey="true" canEdit="false" />

</fields>

</DataSource>

[Isomorphic]

It looks like you're using progressiveLoading - make sure you've read up on how that mode works. It looks like you've got a custom DataSource which is not one of the built-in types, so if you want to use progressiveLoading with that, you actually need to implement it. It's automatic with the built-ins, but there would be no way to make it automatic with a custom DataSource.

Then also, you have some nonsense settings, for example, progressiveLoadingThreshold is not valid in dataProperties, and even if it were, you would never set it to a low value like that. See the docs for where this can be set and what it's for.

If you still need help, and you suspect a framework bug, you need to first make your code minimal, and then show us all the other code involved. Otherwise it's not possible to help.

Also note: you are ~4 years behind in patches. Always update to the latest patched version (see smartclient.com/builds) before posting about any possible bug. Otherwise you could be wasting your time and ours!

[ramireza]

Hi, thank you for the reply.

After simplifying the grid, the implementation now looks like this:

function createMyGridList() {
return isc.ListGrid.create({
ID: "myGridList",
height: "100%",
width: "100%",
dataSource: "exampleGrid",
dataFetchMode: "paged",
dataProperties: {
fetchMode: "paged",
},
dataPageSize: 500,
showAllRecords: false,
fixedRecordHeight: true,
virtualScrolling: true,
dataArrived: function (startRow, endRow) {
console.log(`Data arrived: ${startRow} to ${endRow}`);
}
});
}

The dataSource response is as follows:

{
"endRow": 500,
"invalidateCache": false,
"isDSResponse": true,
"operationType": "fetch",
"queueStatus": 0,
"startRow": 0,
"status": 0,
"totalRows": 606222
}

This confirms that the server is returning the correct startRow, endRow, and totalRows. However, when I scroll down, the grid does not send any further fetch requests. The scrollbar reaches the end, and no additional rows are loaded.

Since the dataSource appears to be working correctly, could this be an issue with the grid configuration or a potential bug in the framework? Let me know if you need more details or additional code snippets from my end.

[Isomorphic]

Sorry, no, this doesn't confirm what you think it does.

1. Your response includes no data at all, so it's clearly been edited. We can't even guess at whether the data property is correct, or at what else might have been edited
2. Your code continues to contain redundant and incorrect properties - you should not be attempting to set resultSet.fetchMode or virtualScrolling at all (see docs)
3. You haven't updated to the latest patched version. As previously mentioned, this is always a requirement

You are now reporting one of the most basic framework features - just basic data paging - as broken, even in a very simple case (even progressiveLoading is now off!).

At this point, please do not expect a further response unless and until you provide a minimal, self-contained test case that we can execute, which clearly demonstrates a framework bug.

Note that you could always purchase an hourly support plan if you need more help!