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

Paging with a remote data source

I searched the forum and found an example that says that it is for sorting and paging the grid however when I downloaded it the paging flag was set to false.  What I don't understand is the following:

1) I have a web call that supports paging (I get the first X records to start and then can ask the web service for the next set when the user pages past what I have).
2) How do I handle paging with the grid control when I am dynamically getting paged data from a web service?

Basically is there a hook or event that I can tie into in order to specify which page I am looking for?  I would love to see a paging example that works with a remote datasource (web API that supports paging).  Thanks!

So my web api returns paginated data like so:


4 Replies

VN Vignesh Natarajan Syncfusion Team June 21, 2019 09:59 AM UTC

Hi Ken,  

Thanks for contacting Syncfusion forums.  

Query: “How do I handle paging with the grid control when I am dynamically getting paged data from a web service? 

From your query, we understand that you need perform paging operation in the server side while suing WebAPI service. We suggest you to achieve your requirement using WebAPI adaptor and handle the skip and top values from the queryStrings.  

Refer the below code example  


<EjsGrid id="Grid" ref="@grid" AllowPaging="true"> 
    <EjsDataManager Url="api/Default" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager> 
        <GridColumn Field="OrderID" HeaderText="Order ID" ISPrimaryKey="true" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right" Width="90"></GridColumn> 
        <GridColumn Field="CustomerID" HeaderText="Customer ID" Width="90"></GridColumn> 
        <GridColumn Field="EmployeeID" HeaderText="Employee ID" Width="90"></GridColumn>         
        <GridColumn Field="Freight" HeaderText="Freight" Width="90"></GridColumn> 


public object Get() 
            var data = order.AsQueryable(); 
            var count = order.Count; 
            var queryString = Request.Query; 
            if (queryString.Keys.Contains("$inlinecount")) 
                StringValues Skip; 
                StringValues Take; 
                int skip = (queryString.TryGetValue("$skip", out Skip)) ? Convert.ToInt32(Skip[0]) : 0; 
                int top = (queryString.TryGetValue("$top", out Take)) ? Convert.ToInt32(Take[0]) : data.Count(); 
                return new { Items = data.Skip(skip).Take(top), Count = count }; 
                return data; 

Refer the below screenshot for the output 


Kindly download the sample from below link 

Please get back to us if you have further queries.  

Vignesh Natarajan. 

KE Ken June 21, 2019 02:04 PM UTC

That's perfect! Thank you!

MR Mohammed Rubeesh January 9, 2021 06:57 PM UTC

How to inlcude search and sort along with paging. 

RS Renjith Singh Rajendran Syncfusion Team January 11, 2021 08:56 AM UTC

Hi Mohammed, 

When using the WebAPI services, you need to handle these actions(search/filter/sort/paging actions) at server side based on the querystring you get using the “Request.Query” from the request in Get method.  

So we suggest you to ensure to handle the search/sorting at server side, based on the “Request.Query” you get from the request to perform search/sort actions when bind WebApi services to Grid.  

        public object Get() 
            var queryString = Request.Query;                  //Based on this request query, handle the search/sort action. 
            string sort = queryString["$orderby"];   //get the sorting query here      
            string filter = queryString["$filter"];   //get the search query here      

Please get back to us if you need further assistance. 

Renjith Singh Rajendran 

Live Chat Icon For mobile
Up arrow icon