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
close icon

Grid pageOptions Not Limiting Results

I using the EJ2 Grid Component in a React web solution that I am working on.  There are 219 items being returned from the endpoint and all are being displayed in each page of the grid view even thought the size is set to 10.  Can you take a look at the attached code sample and screen shot to see if there is an issue that would cause the results to not be limited to 10?

public pageOptions: PageSettingsModel = {
        pageSize: 10, pageSizes: true

I also have a second question, is there an event that I can hook into when the select all option is chosen in the header of the control?   

Attachment: GridComponent_Sample_29dfbb72.zip

1 Reply

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 23, 2019 05:47 AM UTC

Hi Scott,  

Greetings from Syncfusion.  

We could see you are returning all the data (219 records) from the server-end after binding the WebApi adaptor to the Grid datasource. It is not the recommended way to handled the remote data binding. On initial rendering of the Grid or after each paging actions, Grid will send request with the following parameter as querystring to the assigned URL.  


Based on this query string values, you have to handle the paging action as coded below.  

namespace AngularwithASPCore.Controllers 
    public class OrdersController : Controller 
        // GET: api/Orders 
        public object Get() 
            var queryString = Request.Query; 
            int skip = Convert.ToInt32(queryString["$skip"]); 
            int take = Convert.ToInt32(queryString["$top"]); 
            var data = OrdersDetails.GetAllRecords().ToList(); 
            return take != 0 ? new { Items = data.Skip(skip).Take(take).ToList(), Count = data.Count() } : new { Items = data, Count = data.Count() }; 

Refer to the following Help Document.  

If you wish to return all the data to the client-end and need to handle the paging at the client-end itself, you have to use the offline(true) property of the DataManager. Refer to the following code example and Help Document.  

        public object Get() 
            var queryString = Request.Query; 
            var data = OrdersDetails.GetAllRecords().ToList(); 
            return data; 

Only difference between with the offline mode and remote mode is offline requires only Items whereas the offline(false) requires Items/count wrapped as a object.  

Seeni Sakthi Kumar S 

Live Chat Icon For mobile
Up arrow icon