Grid pageOptions Not Limiting Results

[scott]

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

[Seeni Sakthi Kumar Seeni Raj]

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 

{ 

    [Produces("application/json")] 

    [Route("api/Orders")] 

    public class OrdersController : Controller 

    { 

        // GET: api/Orders 

        [HttpGet] 

 

        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.  

https://ej2.syncfusion.com/react/documentation/grid/data-binding/#web-api 

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.  

https://ej2.syncfusion.com/react/documentation/grid/data-binding/#offline-mode 

        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.  

Regards,  

Seeni Sakthi Kumar S