We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Requesting Data from the Server on scroll


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

5 Replies 1 reply marked as answer

RS Rajapandiyan Settu Syncfusion Team January 5, 2023 11:53 AM UTC


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.

Rajapandiyan S

AM Abdul Mounem January 5, 2023 03:47 PM UTC


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) => {
            enableInfiniteScrolling: true,
            //template: template,

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) {
                    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

RS Rajapandiyan Settu Syncfusion Team January 6, 2023 12:11 PM UTC


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.


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



            option.onSuccess(gridData, request);

          } else {





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






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


Rajapandiyan S

Marked as answer

AM Abdul Mounem January 6, 2023 02:12 PM UTC


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

RS Rajapandiyan Settu Syncfusion Team January 9, 2023 12:26 PM UTC


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.


Rajapandiyan S

Live Chat Icon For mobile
Up arrow icon