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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid pageOptions Not Limiting Results

Thread ID:

Created:

Updated:

Platform:

Replies:

150146 Dec 23,2019 04:01 AM UTC Dec 23,2019 05:47 AM UTC React - EJ 2 1
loading
Tags: Grid
scottm
Asked On December 23, 2019 04:01 AM UTC

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 [Syncfusion]
Replied On 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 
{ 
    [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.  


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.  

Regards,  
Seeni Sakthi Kumar S 


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

Live Chat Icon For mobile
Live Chat Icon