1. Home
  2. Forum
  3. Blazor
  4. Consuming WebAPI for pagination

Consuming WebAPI for pagination

Hi there, 

First of all, great job on the support via this forum. Unfortunately the search option is not perfect and it's almost impossible to find
things. The question I'm about to ask I'm sure has been answered already but I did not get there. 


I'm struggling to set the pagination for the following WebAPI response. 
If there is somewhere an example in the documentation any chance you can post a link 
as I did my best to go through it. 

  • {
    • pageNumber: 1,
    • pageSize: 10,
    • totalCount: 10868,
    • totalPages: 1087,
    • hasPrevious: false,
    • hasNext: true,
    }

Thank you in advance for the help.


5 Replies
RS Renjith Singh Rajendran Syncfusion Team January 6, 2021 07:34 AM UTC

Hi Lukasz, 

Greetings from Syncfusion support. 

When using the WebAPI services, you need to handle paging 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 paging at server side, based on the “Request.Query” you get from the request to perform paging actions when bind WebApi services to Grid.  

 
    <SfGrid TValue="Orders" AllowPaging="true">  
        <SfDataManager Url="api/Default" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager> 
        ... 
    </SfGrid> 
 
        [HttpGet] 
        public async Task<object> Get() 
        { 
            ... 
           var data = order.AsQueryable();             
            var queryString = Request.Query; 
            string auto = queryString["$inlineCount"]; 
            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(); 
                var count = data.Count(); 
                return new { Items = data.Skip(skip).Take(top), Count = count }; 
            } 
            ... 
       } 
 
 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


LU Lukasz January 6, 2021 09:21 AM UTC

Hi , 

Thank you for reply. 
What are my options if the API can't be modified ? I want the query string to match my API 
and the reply handled by the client. 

Any chance you can provide an example ? 
Thank you. 


JP Jeevakanth Palaniappan Syncfusion Team January 8, 2021 07:08 AM UTC

Hi Lukasz, 

Thanks for the update. 

Based on your requirement, we suggest you to achieve your requirement by using CustomAdaptor. CustomAdaptor’s Read method will trigger for each action like filtering, searching, sorting, paging etc. and certain actions can be performed in it. Once the data operation is executed, data has to be returned in the form Result and Count to display in the Grid. 

Refer the below code example.  

// Implementing custom adaptor by extending the DataAdaptor class 
   public class CustomAdaptor : DataAdaptor 
   { 
       // Performs data Read operation 
       public override object Read(DataManagerRequest dm, string key = null) 
       { 
           IEnumerable<Order> DataSource = Orders; 
           // send request to server and perform your actions and return data 
            int count = DataSource.Cast<Order>().Count(); 
            if (dm.Skip != 0) 
            { 
                //Paging 
                DataSource = DataOperations.PerformSkip(DataSource, dm.Skip); 
            } 
            if (dm.Take != 0) 
            { 
                DataSource = DataOperations.PerformTake(DataSource, dm.Take); 
            } 
           return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource; 
       } 
   } 


 Please find the below documentation for your reference. 

Reference: 

Please let us know if you have any concerns. 

Regards, 
Jeevakanth SP. 


HA HappyCamper replied to Jeevakanth Palaniappan June 17, 2021 06:45 PM UTC

Hi Lukasz, 

Thanks for the update. 

Based on your requirement, we suggest you to achieve your requirement by using CustomAdaptor. CustomAdaptor’s Read method will trigger for each action like filtering, searching, sorting, paging etc. and certain actions can be performed in it. Once the data operation is executed, data has to be returned in the form Result and Count to display in the Grid. 

Refer the below code example.  

// Implementing custom adaptor by extending the DataAdaptor class 
   public class CustomAdaptor : DataAdaptor 
   { 
       // Performs data Read operation 
       public override object Read(DataManagerRequest dm, string key = null) 
       { 
           IEnumerable<Order> DataSource = Orders; 
           // send request to server and perform your actions and return data 
            int count = DataSource.Cast<Order>().Count(); 
            if (dm.Skip != 0) 
            { 
                //Paging 
                DataSource = DataOperations.PerformSkip(DataSource, dm.Skip); 
            } 
            if (dm.Take != 0) 
            { 
                DataSource = DataOperations.PerformTake(DataSource, dm.Take); 
            } 
           return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource; 
       } 
   } 


 Please find the below documentation for your reference. 

Reference: 

Please let us know if you have any concerns. 

Regards, 
Jeevakanth SP. 


Jeevakanth,

Do you have a code sample to share on how to achieve this specific ask?  The documentation is not clear at all on how this can be achieved.  I have the same ask.  The intent is that you want to catch the page switch event and transform the request querystring to use the parameters to the ones that the calling api requires.

VN Vignesh Natarajan Syncfusion Team June 18, 2021 06:09 AM UTC

Hi Rudi,  
 
Thanks for contacting Syncfusion support.  
 
Query: “I have the same ask.  The intent is that you want to catch the page switch event and transform the request querystring to use the parameters to the ones that the calling api requires.” 
 
We have analyzed your query and we understand that you want to bind data from your API service using CustomAdaptor. Kindly refer the below sample for your reference 
 
 
Note: Kindly change the connectionstring in OrderContext.cs file based on Northwnd.MDF inside the App_Data folder.   
 
We have achieved this requirement using a OrderService.cs class (used as an interface between customadaptor and API service) and using that OrderService inside the CustomAdaptor. Similarly we request you own class to make request to your Service and return the data to Bind it to Grid using CustomAdaptor component. 
    
Refer the below code example.  
 
<SfGrid TValue="Order" AllowFiltering="true" Toolbar="@(new List<string> { "Add", "Edit", "Delete", "Update", "Cancel", "Search" })" AllowSorting="true" AllowPaging="true"> 
    <SfDataManager Adaptor="Adaptors.CustomAdaptor"> 
        <CustomAdaptor></CustomAdaptor> 
    </SfDataManager> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 
    <GridColumns> 
        <GridColumn Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" IsIdentity="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn Field="CustomerID" HeaderText="Customer Name" Width="150"></GridColumn> 
        <GridColumn Field="EmployeeID" HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn> 
    </GridColumns> 
</SfGrid> 
[CustomAdaptor.razor] 
// Performs data Read operation    public override async Task<object> ReadAsync(DataManagerRequest dm, string key = null)    {        var data = await Service.GetPeople();        IEnumerable<Order> DataSource = (IEnumerable<Order>)data;        return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource;    }[OrderService.cs]public class OrderService    {        private readonly HttpClient _httpClient;        public System.Random random = new System.Random();        public OrderService(HttpClient httpClient)        {            _httpClient = httpClient;         }        string baseUrl = https://localhost:44314/;        public async Task<List<Order>> GetPeople()        {             var json = await _httpClient.GetStringAsync($"{baseUrl}api/Default");            return JsonConvert.DeserializeObject<List<Order>>(json);         }    }
 
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan 


Loader.
Up arrow icon