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

Paging with a remote data source

Thread ID:

Created:

Updated:

Platform:

Replies:

145380 Jun 19,2019 03:57 PM UTC Jan 11,2021 08:56 AM UTC Blazor 4
loading
Tags: Grid
Ken
Asked On June 19, 2019 03:57 PM UTC

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 [Syncfusion]
Replied On 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  

[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 


Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan. 


Ken
Replied On June 21, 2019 02:04 PM UTC

That's perfect! Thank you!

Mohammed Rubeesh
Replied On January 9, 2021 06:57 PM UTC

How to inlcude search and sort along with paging. 

Renjith Singh Rajendran [Syncfusion]
Replied On 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.  

 
        [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 


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

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

Live Chat Icon For mobile
Live Chat Icon