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: June 24, 2019).
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 Jun 21,2019 02:04 PM UTC Blazor 2
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!

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