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

Syncfusion Grid - Server side paginated results

Thread ID:

Created:

Updated:

Platform:

Replies:

131642 Jul 20,2017 04:17 PM UTC Jul 21,2017 12:23 PM UTC ASP.NET MVC 1
loading
Tags: Grid
Francis
Asked On July 20, 2017 04:21 PM UTC

Hi all,      I want to show filtered results in a grid gathered from millions of data in our database. I would be handling the loading logic in the server side via ASP.NET Web API and render results via AngularJS.     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.             Each page is limited to 10 pages then if I want to go to the next page I would be requesting a call to the server to get data from the database.       Is this possible with Syncfusion Grid? The examples I have seen are only for grids that has all its data loaded already.     Anybody can shed light on this? Thanks.

Prasanna Kumar Viswanathan [Syncfusion]
Replied On July 21, 2017 12:23 PM UTC

Hi Francis, 

Thanks for contacting Syncfusion support. 

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, 
Prasanna Kumar N.S.V 
 


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

or the page will be automatically redirected to 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

;