Consuming WebAPI for pagination

[Lukasz]

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,
  • data: 

    [ {id: 1}, {id: 2} ]
  }
  

Thank you in advance for the help.

[Renjith Singh Rajendran]

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

            } 

            ... 

       } 

 

 

Reference : https://blazor.syncfusion.com/documentation/datagrid/data-binding/#web-api 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Lukasz]

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. 

[Jeevakanth Palaniappan]

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: 

https://blazor.syncfusion.com/documentation/datagrid/custom-binding/  

https://blazor.syncfusion.com/documentation/datagrid/custom-binding/#data-binding  

Please let us know if you have any concerns. 

Regards, 

Jeevakanth SP. 

[HappyCamper]

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: 

https://blazor.syncfusion.com/documentation/datagrid/custom-binding/  

https://blazor.syncfusion.com/documentation/datagrid/custom-binding/#data-binding  

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.

[Vignesh Natarajan]

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 

 

Sample: https://www.syncfusion.com/downloads/support/forum/161189/ze/APIService-1639338892.zip 

 

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