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

how to paging properly in grid

Hi, I'm reviewing the existing code related to paging in grid.
the symptom of the grid is 
supposed that there are 20 records in total, if I set the page size as 5. then it makes 4 pages.

in actual behaviour in the grid is that it just shows the whole 20 records,
however, the page number is displayed as 1.2.3.4.

that means, the page calculation is ok but it does not react/respond data to the specific page range like 1st page, 2nd page, 3rd page and 4th page.

Please let me know the solution.

Thank you.
Kind Regards,

3 Replies

JK Jayaprakash Kamaraj Syncfusion Team June 9, 2017 06:54 AM UTC

Hi Dongil, 

Thank you for contacting Syncfusion support. 

We suspect that you have using URLAdaptor in Grid. While using UrlAdaptor, you need to handle grid operation (paging/filtering/searching/sorting) in server side. When performing paging, filtering, sorting, editing operations on the grid queries are passed to the server side using DataManager class.  
 
Note: skip/take are the queries responsible for handling the paging action  
  
  
The response from server should be wrapped in an object with properties named result to hold the data and count to hold the total records count. To handle the server-side operations, we have Server-side APIs which has been found in the DataOperations class of Syncfusion Libraries. Refer to the following KB.  
  

@(Html.EJ().Grid<object>("FlatGrid") 
         .Datasource(ds => ds.URL("/Home/DataSource").Adaptor("UrlAdaptor")) 
         .AllowFiltering() 
         .AllowSorting()    /*Sorting Enabled*/ 
         .AllowPaging()    /*Paging Enabled*/ 
         .PageSettings(eve=>eve.PageSize(5)) 
         .FilterSettings(eve=>eve.FilterType(FilterType.Excel)) 
         .Columns(col => 
        { 
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
         .. 
       })) 
 
        public ActionResult DataSource(Syncfusion.JavaScript.DataManager dm) 
        { 
            IEnumerable Data = OrderRepository.GetAllRecords(); 
            Syncfusion.JavaScript.DataSources.DataOperations operation = new Syncfusion.JavaScript.DataSources.DataOperations(); 
.. 
            int count = Data.AsQueryable().Count(); 
            if (dm.Skip != 0) 
            { 
                Data = operation.PerformSkip(Data, dm.Skip); //paging 
            } 
            if (dm.Take != 0) 
            { 
                Data = operation.PerformTake(Data, dm.Take); //paging 
            } 
            return Json(new { result = Data, count = count }, JsonRequestBehavior.AllowGet); 
        } 
 

We have prepared a Grid sample with UrlAdaptor that can be downloaded from the following link. 


 

If you still facing the issue, please share the following information to serve you better.  
 
  1. Grid rendering code example both client and server.
  2. Essential studio  and browser version details.
  3. Please open the console window in the browser and check whether any script error throws.
  4. An issue reproducing sample if possible or hosted link or replicate the issue in the attached sample
Regards, 

Jayaprakash K. 
 



GG Guillaume G January 18, 2021 05:48 PM UTC

Hello,

Sorry for replying on this post. I am facing the same issue but with EJ2 instead. Could you provide me an answer that fits this technology? 

Regards,




RS Rajapandiyan Settu Syncfusion Team January 19, 2021 12:57 PM UTC

Hi GEBAVI, 
 
Thanks for contacting Syncfusion support. 

The URL Adaptor is used for performing On-Demand actions in the EJ2 Grid. This is explained in detail in the below documentation links, 



When we perform any Grid actions like Paging, Sorting, Filtering, Exporting, Searching, etc., the correspond action details are sent to the server. You can get these by using DataManagerRequest class in the server action method. Here, you can perform the corresponding actions with your data and return the resultant data as an object with result and count properties back to the Grid.  

We can render the Grid with pagination by setting the allowPaging as true in the Grid. So for your case you need to return the records based on the page query back to the Grid in order to display it properly.  

Please find the below screenshot which shows the page query sent from the Grid to the server when URL adaptor is bound to the Grid, 

 

Find the below code example and sample for more information. 


[index.cshtml] 

@Html.EJS().Grid("DataOperations").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor"); }).Columns(col => 
{ 
    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 
    col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); 
    col.Field("Freight").HeaderText("Freight").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 
    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); 
 
}).AllowPaging().Render() 
 
 
[HomeController.cs] 

        public ActionResult UrlDatasource(DataManagerRequest dm) // get the action queries using DataManagerRequest class 
        { 
 
            IEnumerable DataSource = OrdersDetails.GetAllRecords().ToList(); 
            DataOperations operation = new DataOperations(); 
 
            if (dm.Search != null && dm.Search.Count > 0) 
            { 
                DataSource = operation.PerformSearching(DataSource, dm.Search);  //Search 
            } 
            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 
            { 
                DataSource = operation.PerformSorting(DataSource, dm.Sorted); 
            } 
            if (dm.Where != null && dm.Where.Count > 0) //Filtering 
            { 
                DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator); 
            } 
            int count = DataSource.Cast<OrdersDetails>().Count(); 
            if (dm.Skip != 0) 
            { 
                DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging 
            } 
            if (dm.Take != 0) 
            { 
                DataSource = operation.PerformTake(DataSource, dm.Take);  //Paging 
            } 
            return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource); // return the data in object format with result and count format 
        } 
 


Please get back to us if you need further assistance with this. 

Regards, 
Rajapandiyan S 


Loader.
Live Chat Icon For mobile
Up arrow icon