Grid API connection

[Petar Rasevic]

Hello I'm new in Blazor and Syncfusion.
I'm working on generic CRUD solution on all my tables.

I have question about pagination in Grid.

How can I call my api and return model in next shape 
{
 Total : 1000,
Result = 

[
{id,name},
{id,name},
{id,name},
]
}
Can the grid component call the API again every time I change the page and retrieve the next n rows?
I have to do that for the tables with a lot of rows.

[Prathap Senthil]

Hi Petar Rasevic,

We have provided support for various types adaptor which will be used to fetch data from different API server end and bind it to Grid. While using SfDataManager and Adaptor, only current page records will be fetched from server and paging operations will be handed in on demand concept. Please find the list of adaptors from below

Reference: Adaptors in Blazor DataManager Component | Syncfusion

So we suggest you to achieve your requirement using any one of the above adaptors listed above. If still doesn’t meet your requirements or if you have your own customized API end points, we suggest using the Custom Adapter with HttpClient to achieve your needs. For your reference, we have created a simple sample.

We accomplished this using the OrderService.cs class, which acts as an interface between the custom adapter and API service. The OrderService is then used within the Custom Adapter. Similarly, we recommend creating your own class to make requests to your service and return data for binding to the grid using the Custom Adapter component. This approach will help you meet your requirements as per your needs.

Note : After connecting the database, we need to copy the path of the database and change the connection string with the copied path in OrderContext.cs file based on the NORTHWND.MDF file

Home.Razor
<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

@inherits DataAdaptor<OrderService>

 

<CascadingValue Value="@this">

    @ChildContent

</CascadingValue>

 

@code {

    [Parameter]

    [JsonIgnore]

    public RenderFragment ChildContent { get; set; }

 

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

----

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

 

        }

While using CustomAdaptor, for every action ReadAsync method will be called along with certain actions details and from ReadAsync method API end call be triggered and paging or other action be performed.

Regards,
Prathap Senthil

Attachment: APIService_6ed830c8.zip