Requesting Data from the Server on scroll

[Abdul Mounem]

Hi,

I have a grid where i don't want to have paging control, but the server will return me the data in chunks, and each time the user keeps scrolling, it will load more data, I have enabled the enableInfiniteScrolling, but the getData function in the CustomDataAdaptor is only being called once, how can I tell the grid that server still has more data and keep loading

[Rajapandiyan Settu]

Abdul,

Thanks for contacting Syncfusion support.

Kindly share the below details to proceed further with your query.

1. Share the complete Grid code files you have used.
2. How could you bind the data to the Grid? Share the code details.
3. Which type of API service do you have using in your project? (WebAPI service/ OData/ SQL/ Own Custom service)
4. Are you want to perform all the Grid actions like Editing, Searching, Pagination, Sorting, etc., from the server (custom service) or in the client side?
5. If possible, share a simple issue reproducible sample which will be very helpful to resolve it earlier.

Regards,
Rajapandiyan S

[Abdul Mounem]

Hi,

this is the code of the grid

 this.gridEmails = new Grid({

            dataSource: dataManager,

            editSettings: {

                allowAdding: true,

            },

            height: '100%',

            columns: [{

                field: 'id',

                isPrimaryKey: true,

                visible: false,

            }, {

                field: 'name',

                headerText: 'Emails'

            }],

            actionComplete: (args) => {

                console.log(args);

            },

            enableInfiniteScrolling: true,

            //template: template,

        });

        this.gridEmails.appendTo('#gridEmails');

I'm using my own custom service, I'm running the code inside a platform that provide a JSBridge to retrieve the data, there is no URL to request from or something similar, only JS functions

  let dataManager = new DataManager({

            adaptor: new CustomDataAdaptor({

                getData: async (option: AjaxOption) => {

                    if (!option.onSuccess) {

                        return;

                    }

                    let httpRequest: XMLHttpRequest = new XMLHttpRequest();

                    httpRequest.open("POST", '', true);

                    httpRequest.getResponseHeader = (header) => {

                        return 'application/json'

                    }

                    httpRequest.setRequestHeader('Content-Type', 'application/json; charset=utf-8');

                    let emails = await loadEmailsAsync(this.userId, this.emailPageIndex++);

                    let request: any = extend({}, option, { httpRequest: httpRequest });

                    let response = {

                        result: emails.map(x => x.attributes),

                        count: emails.length,

                        aggregates: false

                    }

                    option.onSuccess(JSON.stringify(response), request);

                }

            }),

        });

It's working for loading the data for the first time, but then it does not continue requesting the data

For now, I only want to load data, no other operations needed

[Rajapandiyan Settu]

Abdul,

Since the CustomDataAdaptor is extended from the UrlAdaptor, it expects a response as a JSON object with properties result and count (result- current page records, count- whole records count).

We suggest you to return the proper result and count values to the option.onSuccess method to achieve your requirement. Please find the below code example and sample for your reference.

[index.js]

var datas = new ej.data.DataManager({

  adaptor: new ej.data.CustomDataAdaptor({

    getData: function (option) {

      var query = JSON.parse(option.data);

      var take = query.take;

      var skip = query.skip;

      var url = SERVICE_URI + '?$count=true';

      if (skip) {

        url = url + '&$skip=' + skip;

      }

      if (take) {

        url = url + '&$top=' + take;

      }

      var xhttp = new XMLHttpRequest();

      xhttp.onreadystatechange = function () {

        if (this.readyState == 4) {

          request = ej.base.extend({}, option, { httpRequest: xhttp });

          if (

            (xhttp.status >= 200 && xhttp.status <= 299) ||

            xhttp.status === 304

          ) {

            datatemp = JSON.parse(xhttp.responseText);

            var gridData = {

              result: datatemp.value,  // contains current page records

              count: datatemp['@odata.count'], // contains whole records count

            };

            console.log(gridData);

            option.onSuccess(gridData, request);

          } else {

            option.onFailure(request);

          }

        }

      };

      xhttp.open('GET', url, true);

      xhttp.send();

    },

  }),

});

 

Sample: https://stackblitz.com/edit/as4fom-juprio?file=index.js

Regards,

Rajapandiyan S

[Abdul Mounem]

Hi,

Thanks, i though the count will be the current request result count, and not the total count, now it's keep requesting data as needed

[Rajapandiyan Settu]

Abdul,

We are happy to hear that you have achieved your requirement with the solution provided.

Please get back to us if you need further assistance.

Regards,

Rajapandiyan S