Paging with a remote data source

[Ken]

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:

https://azure-api.net/eventservice/Event/GetEvents[?page][&pageSize]

[Vignesh Natarajan]

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  

[index.razor] 

<EjsGrid id="Grid" ref="@grid" AllowPaging="true"> 

    <EjsDataManager Url="api/Default" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager> 

    <GridColumns> 

        <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> 

    </GridColumns> 

</EjsGrid> 

[DefaultController] 

public object Get() 

        { 

            BindDataSource(); 

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

            } 

            else 

            { 

                return data; 

            } 

Refer the below screenshot for the output 

 

Kindly download the sample from below link 

Sample: https://www.syncfusion.com/downloads/support/forum/145380/ze/WebAPI_Server-394859197  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan. 

[Ken]

That's perfect! Thank you!

[Mohammed Rubeesh]

How to inlcude search and sort along with paging. 

[Renjith Singh Rajendran]

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.  

 

        [HttpGet] 

        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. 

Regards, 

Renjith Singh Rajendran