Grid: Enable paging with remotely paged data

Question

I am using the ES5 DataGrid and my data source has over 2,000 items. I do not want to pass all 2,000 items to the client so I have enabled server-side paging to return an object that looks something like:

{

"count": 2643,

"items": [

--- 50 items returned, not all 2,643

]

}

As you can see, 50 items (paged on the server) are being sent to the client but there are 2,643 items remotely available.

I want to:

Load the 50 items into the grid
Have the page show something like "<< < ...11 12 13 > >>"
When a user clicks on the pager, a new request should be made to the remote api to request the new page of data.

However, if the page size is 50 then the pager looks like the following image.

How can I only load 50 items but have the pager think there are a total of 2,643?

Pavithra Subramaniyam · Answer

Hi Jordan Arron,Thanks for contacting Syncfusion support.In Our EJ2 DataManager, each adaptor expects the response from the
server in a particular format to work properly. From your update, we suspect
that you are using the “WebAPIAdaptor”. So, We suggest you sending the response starts with capital letters format
like “Items” and “Count” to overcome the issue. https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/#web-apiIf you still facing
the issue, please share the below details that will be helpful for us to
provide a better solution as early as possible. 
 Share the Grid code
 What type of Adaptor you are using?
 Is there any script error?
 Share the Syncfusion version you are using
Regards,Pavithra S

Jordan Arron · Answer

Thanks for the reply. This is fantastic support :-)

The following is my code"

var url = 'https://my.api.endpoint'; // paging performed server-side. For testing, only 2 of a total of 8 items are returned.
  new ej.data.DataManager({
    url: url,
    adaptor: new ej.data.WebApiAdaptor(),
  })
    .executeQuery(new ej.data.Query())
    .then((e) => {
      console.log('e', e);
      grid = new ej.grids.Grid({
        dataSource: e,
        allowPaging: true,
        pageSettings: { totalItemsInfo: 8, pageCount: 4 }, // hardcoded for now
....
      });

The api is returned the following:

{

Count: 8,

Items: [ {obj1}, {obj2} ]

}

The grid binds to the data correctly and is displaying 2 items.

I would expect the page to have 4 pages available and the text on the right to read "1 of 4 pages (8 items)" Instead, I am only seeing the following:

Pavithra Subramaniyam · Answer

Hi Jordan Arron,Thanks for sharing the details.From your update, We understand that you are fetching only the one-page
records and setting them as the Grid local dataSource and hardcode the “pageSettings” to
have more “totalRecordsCount”. In Grid local data binding, the pager links will
be rendered based on the dataSource length. This is the default behavior. Since
you want to do the server-side paging, you can directly set the DataManager
with WebAPIAdaptor to the Grid DataSource property. So, the pager links will be
rendered based on the “Count” value, but the Grid will fetch and show only the
current page records. Please refer to the below code example and documentation
link for more information.

var url = 'https://my.api.endpoint'; 
   
  grid = new ej.grids.Grid({
    dataSource: new ej.data.DataManager({
      url: url,
      adaptor: new ej.data.WebApiAdaptor(),
    }),
    allowPaging: true,
    pageSettings: { pageCount: 4 },
    .  .  .
  });

Documentation : https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/remote-data/#web-api-adaptordemo                  : https://ej2.syncfusion.com/javascript/demos/#/material/grid/remote-data.htmlIf this still doesn’t meet your requirement, please share what are the issues you are
facing with the above remote data bindings that will be helpful for us
to provide a better solution as early as possible.Regards,Pavithra SIf this post is helpful, please consider Accepting it as the
solution so that other members can locate it more quickly.