Log in to start a topic

Server side pagination using spreadjs

Posted by: christina.devine on 20 February 2023, 7:26 am EST

  • christina.devine

    • Post Options:
    • Link
      Copy

    Posted 20 February 2023, 7:26 am EST

    Hi Team,

    We have a requirement to implement server-side pagination and the experience which we want to provide to our users is something similar to Infinite Scrolling,

    for eg: On load the page, we will display 100 rows. When user scrolls vertically and reaches the end of the scroll, we will need to make a API call and then append additional rows.

    Can you please suggest on what approach we can use with spread JS for the above ?

  • ankit.kumar

    Posted 21 February 2023, 1:44 pm EST

    Dear Christina,

    I wanted to follow up on your inquiry regarding the infinity scrolling feature in SpreadJS. While the library does not have this feature built into it, there is a workaround you can use to achieve the desired effect.

    To implement infinity scrolling, you can utilize the TopRowChanged event provided by SpreadJS. When a user scrolls through the worksheet, this event will trigger, allowing you to check the index of the bottom row in the viewport using the getViewportBottomRow method. If the index matches the total number of rows in the worksheet, you can add additional rows to the bottom of the sheet using the addRows method.

    Here’s an example code snippet you can use as a reference:

    // Add the TopRowChanged Event Handler
spread.bind(GC.Spread.Sheets.Events.TopRowChanged, (e, args) => {
    if (args.sheet.getViewportBottomRow(1) === args.sheet.getRowCount() - 1) {
        // Make Call to the Server 
        // Add 'n' number of rows to the sheet.
        args.sheet.addRows(args.sheet.getRowCount(), 100);
    }
});

    For your convenience, I have also included a sample implementation of this technique in the link below. This should help you get started with implementing infinity scrolling in your SpreadJS project:

    Sample: https://jscodemine.grapecity.com/share/ml-G6dGrJUSB-B0ly5qJcA/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

    I hope you find this information useful. If you have any further questions or need additional assistance, please don’t hesitate to reach out to us. We are always happy to help.

    References:

    TopRowChanged Event: https://www.grapecity.com/spreadjs/api/v15/classes/GC.Spread.Sheets.Events#toprowchanged

    getViewPortBottomRow method: https://www.grapecity.com/spreadjs/api/v15/classes/GC.Spread.Sheets.Worksheet#getviewportbottomrow

    Best regards,

    Ankit

  • christina.devine

    Posted 24 February 2023, 10:19 am EST

    Thanks Ankit for the reply.

    We are able to add the empty rows(without any data) dynamically as user scrolls to the bottom of the sheet.

    However, we are unable to add new rows with data ( JSON ). On load, lets say we load the sheet/tablesheet with JSON data. And on scroll, we want to make an API call and then append new rows with the new JSON data. Can you please share an example for this ?

  • christina.devine

    Posted 24 February 2023, 10:19 am EST

    Thanks Ankit for the reply.

    We are able to add the empty rows(without any data) dynamically as user scrolls to the bottom of the sheet.

    However, we are unable to add new rows with data ( JSON ). On load, lets say we load the sheet/tablesheet with JSON data. And on scroll, we want to make an API call and then append new rows with the new JSON data. Can you please share an example for this ?

  • ankit.kumar

    Posted 27 February 2023, 11:38 pm EST

    Hello Christina,

    To add new data to the sheet, you can use the setArray method, which is also used in the approach mentioned above to set data to SpreadJS. Below is a code snippet that you can refer to and a sample that I have created for you:

    // Add the TopRowChanged Event Handler
spread.bind(GC.Spread.Sheets.Events.TopRowChanged, (e, args) => {
    if (args.sheet.getViewportBottomRow(1) === args.sheet.getRowCount() - 1) {
        // Make a call to the server 
        // Add 'n' number of rows to the sheet.
        var newProducts = getProducts(100)
        args.sheet.suspendPaint();
        args.sheet.addRows(lastRowCount, 100);
        sheet.setArray(lastRowCount, 0, newProducts);
        args.sheet.resumePaint();
        lastRowCount += 100;
    }
});

    In this code snippet, the TopRowChanged event is handled to add new rows to the sheet. When the bottom row of the viewport is equal to the last row of the sheet, the code makes a call to the server and adds 100 new rows to the sheet using the addRows method. Then, the setArray method is used to set the new data to the sheet. Finally, the lastRowCount variable is updated to keep track of the last row added.

    You can also check out the sample I have created for you, where I have set the initial data and added new rows to the sheet using the TopRowChanged event. Here’s the link to the sample: https://jscodemine.grapecity.com/share/b8fPdafqE0aTSYSSnRW6nw/?defaultOpen={“OpenedFileName”%3A[“%2Findex.html”%2C"%2Fsrc%2Fdata.js"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

    To learn more about the setArray method, you can refer to the following link: https://www.grapecity.com/spreadjs/api/v16/classes/GC.Spread.Sheets.Worksheet#setarray

    I hope this helps. Let me know if you have any further questions.

    Best regards,

    Ankit

  • christina.devine

    Posted 28 February 2023, 8:07 am EST

    Hi Ankit,

    Thanks for your reply. We are using **setDatasource ** method to load list of json values initially and then we want to append the list of json into existing sheet when scrolling down. So we tried to update datasource inside this TopRowChanged event but the datsource change was not reflected in spread. Here our json has coloumn header and values so we can’t use setArray method to achieve this.

    Could you please give us any workaround for the same?

  • ankit.kumar

    Posted 2 March 2023, 12:50 am EST

    Dear Christina,

    I hope this message finds you well. It appears that you are using Sheet Binding in your application. I’ve tried creating a sample using the setDataSource() method, and it seems to be working correctly on my end. Please find below the code snippet and sample that I have tested with:

    spread.bind(GC.Spread.Sheets.Events.TopRowChanged, (e, args) => {
    if (args.sheet.getViewportBottomRow(1) === args.sheet.getRowCount() - 1) {
        // Make Call to the Server 
        // Add 'n' number of rows to the sheet.
        args.sheet.suspendPaint();
        args.sheet.addRows(lastRowCount, 100);
        args.sheet.getDataSource().splice(lastRowCount, 100, ...getProducts(100));
        args.sheet.resumePaint();
        lastRowCount += 100;
    }
});

    Sample: https://jscodemine.grapecity.com/share/hDKvLP1_BkGqDQXxDaeDxA/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fpackage.json"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

    If you’re still having issues, please share a minimal sample that replicates the problem. It would allow us to investigate the issue on our end and provide you with appropriate assistance.

    Thank you for your time and consideration.

    Best regards,

    Ankit

  • ankit.kumar

    Posted 2 March 2023, 12:50 am EST

    Dear Christina,

    I hope this message finds you well. It appears that you are using Sheet Binding in your application. I’ve tried creating a sample using the setDataSource() method, and it seems to be working correctly on my end. Please find below the code snippet and sample that I have tested with:

    spread.bind(GC.Spread.Sheets.Events.TopRowChanged, (e, args) => {
    if (args.sheet.getViewportBottomRow(1) === args.sheet.getRowCount() - 1) {
        // Make Call to the Server 
        // Add 'n' number of rows to the sheet.
        args.sheet.suspendPaint();
        args.sheet.addRows(lastRowCount, 100);
        args.sheet.getDataSource().splice(lastRowCount, 100, ...getProducts(100));
        args.sheet.resumePaint();
        lastRowCount += 100;
    }
});

    Sample: https://jscodemine.grapecity.com/share/hDKvLP1_BkGqDQXxDaeDxA/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fpackage.json"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

    If you’re still having issues, please share a minimal sample that replicates the problem. It would allow us to investigate the issue on our end and provide you with appropriate assistance.

    Thank you for your time and consideration.

    Best regards,

    Ankit

  • christina.devine

    Posted 2 March 2023, 11:20 am EST

    Hi Ankit,

    Thanks for your reply. It is working fine in Worksheet. We are having another scenario and there we are using TableSheet. Could you please give us some reference for the same functionality to achieve in tablesheet.

    In tablesheet also we are loading list of json like below,

    let dataManager = spread.dataManager();

    let myTable = dataManager.addTable(‘myTable’, {

    data: this.dataSource

    });

    let sheet = spread.addSheetTab(1, “Table Sheet”, GC.Spread.Sheets.SheetType.tableSheet);

    spread.setActiveSheetTab(“Table Sheet”);

    myTable.fetch().then(function () {
  let view = myTable.addView('myView');
  sheet.setDataView(view);
});

  • ankit.kumar

    Posted 4 March 2023, 10:47 pm EST

    Dear Christina,

    To enable the infinite scroll feature in Tablesheet, please follow these steps. First, add a table to the data manager of Spread using the dataManager.addTable(tableName, IDataSourceOption) method. Within the addTable() function, ensure that the sourceOption.remote.read property is a function that returns a Promise object containing the datasource.

    When the TopRowChanged event is triggered, call the table.fetch(true) method. Once this method returns the Promise object, you can update the datasource and set the updated view on the Tablesheet. To achieve this, add the following event handler to your code:

    spread.bind(GC.Spread.Sheets.Events.TopRowChanged, (e, args) => {
  if (args.sheet.getViewportBottomRow(1) === args.sheet.getRowCount() - 1) {
    products.splice(lastRowCount, 100, ...getProducts(100));
    lastRowCount += 100;
    myTable.fetch(true).then(() => {
      let myView = myTable.views["myView"];
      tableSheet.setDataView(myView);
    });
  }
});

    Here, products is the array of data that you want to display, and lastRowCount is the index of the last row displayed on the Tablesheet. The getProducts() function retrieves the next set of 100 products to display.

    To implement this feature, please refer to the attached sample. Additionally, you can find further information on dynamically changing datasources and the IDataSourceOption interface in the documentation links provided below:

    Changing datasource dynamically: https://www.grapecity.com/spreadjs/docs/features/tablesheet/data-operations/change-datasource-dya

    IDataSourceOption interface: https://www.grapecity.com/spreadjs/api/v15/modules/GC.Data#idatasourceoption

    You can access the sample code at this link: https://jscodemine.grapecity.com/share/hQnUQ7dEqk_hpTTe5ou1eA/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"%2C"%2Fsrc%2Fdata.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

    I hope that the information provided proves useful in addressing your query. However, if you continue to encounter difficulties, please do not hesitate to share a minimal working sample along with your current implementation. You can fork this sample and provide us with the necessary details.

    Please feel free to contact us if you have any further questions or concerns.

    Best regards,

    Ankit

  • christina.devine

    Posted 9 March 2023, 8:02 am EST

    Hi Ankit,

    Thanks for your reply. It is working fine.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2025 MESCIUS USA, Inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.