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.
Unfortunately, activation email could not send to your email. Please try again.

ej-grid sample with Paging

Thread ID:

Created:

Updated:

Platform:

Replies:

128606 Jan 31,2017 12:32 PM Feb 1,2017 04:10 PM ASP.NET Core 4
loading
Tags: Grid
dsapo
Asked On January 31, 2017 12:32 PM

Hi Support:

Do you have a sample of the ej-grid with ASP.NET MVC core with paging.

Thanks in advanced.

David

dsapo
Replied On January 31, 2017 12:42 PM

Hi again:

I forgot to mention that I need to know how to do the paging at the server side to query the database with only the records in the selected page range.

Thanks

David

Jayaprakash Kamaraj [Syncfusion]
Replied On February 1, 2017 07:22 AM

Hi David, 

We can perform server side paging using UrlAdaptor of Grid. Using the URLAdaptor, Grid collects the data (need for current page) from the server. For ASP.NET core sample, we can get the dynamic value using “[FromBody]CrudModel” as follows,  
 
<ej-grid id="GridContainer" 
         allow-resize-to-fit="true" 
         allow-sorting="true" 
         allow-text-wrap="true" 
         allow-paging="true" 
         is-responsive="true" 
         enable-responsive-row="true"> 
    <e-datamanager url="/Home/DataSource" insert-url="/Home/CellEditInsert" update-url="/Home/CellEditUpdate" remove-url="/Home/CellEditDelete" adaptor="UrlAdaptor"></e-datamanager> 
    .. 
 
   <e-columns> 
        <e-column field="OrderID" 
                  header-text="ID" 
                  is-primary-key="true" 
                  is-identity="true" 
                  visible="false" /> 
        <e-column field="CustomerID" header-text="CustomerID" /> 
        <e-column field="EmployeeID" header-text="EmployeeID" /> 
    </e-columns> 
</ej-grid> 
 
public ActionResult DataSource([FromBody]DataManager dm) 
        { 
 
            IEnumerable data = order; 
            DataOperations operation = new DataOperations(); 
            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 
            { 
                data = operation.PerformSorting(data, dm.Sorted); 
            } 
            if (dm.Where != null && dm.Where.Count > 0) //Filtering 
            { 
                data = operation.PerformWhereFilter(data, dm.Where, dm.Where[0].Operator); 
            } 
            int count = data.Cast<Orders>().Count(); 
            if (dm.Skip != 0)  //paging 
            { 
                data = operation.PerformSkip(data, dm.Skip); 
            } 
            if (dm.Take != 0) 
            { 
                data = operation.PerformTake(data, dm.Take); 
            } 
            return Json(new { result = data, count = count }); 
 
        } 
 
 
 
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.  
  
  
AllowPaging API of the Grid will handle the pagination. After enabling the AllowPaging, the Grid will be show the pager. It has been used to switching between the pages. In the server-end skip/take values will be varied according to the pagination occurred in the Grid. Refer to the following Help Document.  
  
  
While using UrlAdaptor, you can handle grid operation (filtering/searching/sorting) in server side. When performing filtering, sorting, editing operations on the grid queries are passed to the server side and processed by default and returned. But, when you group a column, the query for sorting operation is passed to the server side and by default it processes and returns the processed data. The grouping operation is executed only at the client side.   
   
The DataManager class helps in binding the Grid queries passed to the server-side. Based on those queries   
you can perform server-side operation on the Grid data.   
The query parameters that help you perform the server-side operations are as follows.  
  
Expand   
It is used as OData Expand query.   
RequiresCounts   
When this property is set to True, the total count of records are included in the result.   
Skip   
Details regarding current page are skipped.   
Take   
Used to take required records from data manager.   
Sorted   
Records return the sorted collection.   
Table   
It is a data source table name.   
Where   
Records return the filter collection.   
 
DataManager Operations:   
The query parameters are serialized by the DataManager class and the server-side operations such as sorting, filtering, paging are performed by the PerformSortingPerfomWherFilterPerformSkip and PerformTake methods.   
   
In Grid, we have many adaptors to perform server side operations. Please refer to the below link.   
 
       
Regards, 

Jayaprakash K. 


dsapo
Replied On February 1, 2017 10:35 AM

Hi Jayaprakash:

WIth this approach, it seems that I will be pulling all the records from database always, and then sending back to the view only the specific ones for the view.

If that the case, is there a way to query at the database only the records related with the specific page.

Thanks again


David 



dsapo
Replied On February 1, 2017 04:10 PM

HI Jayaprakash:

I have another question.  In our scenario we have an external button outside the ejGrid (that we used to transfer aditional filters to the server that are not in the grid columns).  

How can we invoke the DataSource action method from Javascript, keeping the paging functionality working properly.

Thanks again.


David 

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.

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.

;