Manually setting totalRecordCount / pageCount with JS data

[Grant]

Hi,

I am using a code base with some JS wrappers through which all of our API calls proceed. In order to work with these wrappers, I'm setting the dataSource of my grid as simply the data array returned. the wrapper component also returns the total count of records for the query. I am attempting to use this record count in the pageSettings.

Some pseudo code:

const apiCallResult = {
  data: [ {...}, {...}],  // 2 records returned
  totalRecords: 6
};

const grid = new Grid({
  dataSource: [],
  pageSettings: {
    pageSize: 2,
    totalRecordCount: 0,
    pageCount: 1
  },
  ...
});

grid.dataSource = apiCallResult.data;
grid.pageSettings.totalRecordCount = apiCallResult.totalRecords;
grid.pageSettings.pageCount = 3;

It seems that the grid is ignoring the pageSettings  values and rendering the pager only based on the dataSource results (it's showing '1 of 1 pages (2 items)')

Am I doing something wrong, or is this not a supported use case?

[Madhu Sudhanan P]

Hi Grant, 

Thanks for contacting Syncfusion support. 

From the query we understood that you want to perform the data binding with the result from the external api request. You can achieve this using the custom binding feature of the grid. Please go through the below link which explains data binding with result from external api result and doing CRUD operations. 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/data-binding/#custom-binding 

Demo: https://ej2.syncfusion.com/react/demos/#/material/grid/custom-binding 

Regards, 

Madhu Sudhanan P 

[Grant]

This answer didn't help at all (especially since I'm not working in react!)

Restating - my API interactions must get its data via a client side proxy object... the grid does not have access to the HTTP api.

I ended up working around this, and would like to explain my findings for anyone who may come up against this:

From my testing, when a pager is injected into a grid [Grid.Inject(Page)] the Grid and Pager become tied to each other... such that when the grid data source property is set, the grid will force the pager to be on page 1... if you try to then update the currentPage propety, the grid attempts to update the displayed data. I found I was ending up in a loop.

My work around is to not use Grid.Inject(Page), but to manually instatiate a Peger element and set its properties as needed.

[Madhu Sudhanan P]

Hi Grant, 

Sorry for the inconvenience caused. 

We have prepare the below sample to do custom binding from external request result, please find the same from the below link. 

https://stackblitz.com/edit/ts-grid-custom-binding?file=index.ts 

To handle custom binding with external data, the dataSource to the grid has to be assigned as object with result and count as property. The result holds current view data and count property should hold the total of the whole data set. 

var dm = new DataManager({ url: "https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Orders" }); 

    dm.executeQuery(new Query().requiresCount().skip(0).take(5)).then((e) => { 

      grid.dataSource = { 

        result: e.result, 

        count: e.count 

      } 

    }); 

Also for every grid action such as paging, grouping or sorting the dataStateChange event will be trigged and we need to perform the AJAX request there based on the event argument and need to assign the new set of data to the grid. 

let grid: Grid = new Grid( 

        { 

            ...... 

            dataStateChange: (e) => { 

                dm.executeQuery(new Query().requiresCount().skip(e.skip).take(e.take)) 

                .then((e) => { 

                    grid.dataSource = { 

                      result: e.result, 

                      count: e.count 

                    } 

                }); 

            } 

        }); 

https://ej2.syncfusion.com/documentation/api/grid/#datastatechange 

https://ej2.syncfusion.com/documentation/api/grid/dataStateChangeEventArgs/#datastatechangeeventargs 

Regards, 

Madhu Sudhanan P 

[tu van]

Hi all,

The first one, this is great libs for me.

Currently, I have the same issue too.

I have created grid with init pageSettings:

pageSettings = {

currentPage: 1,

pageNumber: 1,

pageSize: 5,

pageCount: 1,

totalRecordsCount: 1,

pageSizes: true

}

after that I have called API to set for grid's data source and

update the pageSettings object or set the settings via

this.Grid.pageSettings.totalRecordsCount = <new_value>

this.Grid.pageSettings.pageCount = <new_value>

BUT it's not working exactly.

So I tried with solution:

setTimeout(() => {

this.Grid.pageSettings.totalRecordsCount = <new_value> ;

this.Grid.pageSettings.pageCount = <new_value> ;

}, 100);

and this working.

I hope this issue will update soon. That all for this.

[Joseph Christ Nithin Issack]

Hi Tu, 

Greetings from Syncfusion support. 

  Based on your requirement you have created a EJ2 Grid with page settings at initial rendering, then you have updated the pageSettings, but it is not working as expected for you. 

  In the previous update we have suggested the result and count approach for the pager where the count is the total number of records and the result is the number of records to be displayed in the current page. We want you to ensure, have you used `setTimeout` method where you have updated the pageSettings in any of the EJ2 Grid’s events or separately. 

We also want you to share the following details so that we will be able to provide a better solution ASAP. 

• Share the complete grid rendering code and the code for updating the page settings.
• Screenshot or video demonstration of the mentioned issue.
• Share the Syncfusion package version you are using.

Regards, 

Joseph I