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.

Grid Paging/Sorting with Server Side Data

Thread ID:

Created:

Updated:

Platform:

Replies:

117799 Dec 16,2014 12:24 PM Jul 23,2017 11:55 PM ASP.NET MVC 3
loading
Tags: Grid
Fabio Melendez
Asked On December 16, 2014 12:24 PM

Here is what I am trying to accomplish

1. Have a Rest Service calls that receives a page Size, sort criteria and it returns a List of records and number of pages to be used as data for a Grid
2. The Grid will only load the data for the given page and when the user Filters/Sorts/Pages then the grid will make the call to get the next set of data


have not been able to identify a sample nor found anything in the forums to use as guidance on this type of scenario

Madhu Sudhanan P [Syncfusion]
Replied On December 17, 2014 05:26 AM

Hi Fabio,

 

Thanks for using Syncfusion products.

 

Based on your requirement, we have created a simple grid sample, in which the grid  is populated with the data from Web API 2.2 OData Controller and the same can be downloaded from the below location.

 

Sample Location: http://www.syncfusion.com/downloads/support/directtrac/133090/MvcApplication4-700577905.zip

 

The below code snippet have been used in the above sample.

 

 

@(Html.EJ().Grid<Order>("Grid")

        .Datasource("/odata/Orders") //Restful service url

        .AllowSorting()

        .AllowFiltering()

        .FilterSettings(filter => filter.FilterType(FilterType.Menu))                               

        .AllowPaging()

        .Columns(cols =>

        {

            cols.Field("OrderID").Add();

            cols.Field("EmployeeID").Add();

            cols.Field("CustomerID").Type("string").Add();

            cols.Field("Freight").Format("{0:C}").Add();

            cols.Field("ShipName").Type("string").Add();           

        })               

        )

 

 

In the above sample, the filtering, paging and sorting are handled by the controller itself. Please refer the below screenshots for the request and response from the web api.

 

Paging:

 

 

 

Filtering:

 

 

Sorting:

 

 

Please let us know if you have any queries.

 

Regards,

Madhu Sudhanan. P


Francis
Replied On July 20, 2017 09:13 AM

Hi Madhu Sudhanan P ,

      In my case, we are dealing with millions of data, could you recommend an approach or solution for loading these million rows into a paginated grid wherein the data are lazy loaded or loaded on demand. Based on the example, you are getting all the data at once, I am thinking of using Limits for each page. Can you shed light on this? Thanks.



Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 23, 2017 11:55 PM

Hi Fabio,  
 
According to your requirement, you have try to perform server –side paging operation in Grid.  To perform serve side operations(paging, filtering, sorting) in webapi adaptor, use ODataQueryOptions. ODataQueryOptions parameter in server side controller which contains all the required parameters for performing server side operations such as paging, sorting and filtering.  
 
We have created a sample in Angular JS with Web API and please download from the following link.   
 
 
Find the code example:   
 
 
<div class="row">  
    <div ej-grid id="Grid" e-width="500px" e-datasource="data" e-allowgrouping="true" ------ >  
        <div e-columns>  
            -------------------------------  
       </div>  
    </div>  
  
</div>  
  
<script>  
    angular.module("GridCtrl", ["ejangular"])  
        .controller("bodyCtrl", function ($scope) {  
  
        //Provide the datasource to the grid. Here the WebApiAdaptor is used.  
        $scope.data = ej.DataManager({ url: "/api/Orders", adaptor: "WebApiAdaptor" });  
  
        $scope.tools = ["add", "edit", "delete", "update", "cancel", "search"];  
  
    });  
</script>  
  
---------------------------------------------  
 
public PageResult<OrdersView> Get(ODataQueryOptions opts)  
        {  
            List<OrdersView> ord = db.OrdersViews.ToList();  
  
            return new PageResult<OrdersView>(opts.ApplyTo(ord.AsQueryable()) as IEnumerable<OrdersView>,null, ord.Count);  
        }  
 
Regards,  
Thavasianand 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.

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.

;