ej-grid sample with Paging

[dsapo]

Hi Support:

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

Thanks in advanced.

David

[dsapo]

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]

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 }); 

 

        } 

 

 

Sample: http://www.syncfusion.com/downloads/support/forum/128606/ze/WebApplication8-2032953002 

 

Note: skip/take are the queries responsible for handling the paging action  

  

https://help.syncfusion.com/aspnetmvc/grid/data-adaptors#url-adaptor  

  

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.  

  

https://www.syncfusion.com/kb/4300/server-side-api-for-datamanager-operations  

  

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.  

  

https://help.syncfusion.com/api/js/ejgrid#members:allowpaging  

  

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 PerformSorting, PerfomWherFilter, PerformSkip and PerformTake methods.   

   

In Grid, we have many adaptors to perform server side operations. Please refer to the below link.   

Adaptors: https://help.syncfusion.com/aspnetmvc/grid/data-adaptors      

 

       

Regards, 

Jayaprakash K. 

[dsapo]

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]

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