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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Manually setting totalRecordCount / pageCount with JS data

Thread ID:

Created:

Updated:

Platform:

Replies:

142661 Feb 14,2019 03:55 AM UTC Feb 18,2019 06:03 AM UTC JavaScript - EJ 2 3
loading
Tags: Grid
Grant
Asked On February 14, 2019 03:55 AM UTC

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 [Syncfusion]
Replied On February 14, 2019 06:26 AM UTC

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. 



Regards, 
Madhu Sudhanan P 


Grant
Replied On February 15, 2019 11:21 PM UTC

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 [Syncfusion]
Replied On February 18, 2019 06:03 AM UTC

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. 


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 
                    } 
                }); 
            } 
        }); 




Regards, 
Madhu Sudhanan P 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;