DataGrid remote data with client filtering

[Damh]

Hi,

  I used DataGrid with remote data by Web API, it works well. But I would like to add filtering function with client data only. (filter the data displayed on the grid now). How to achieve it? Thanks.

[Vignesh Natarajan]

Hi Damh,  

 

Greetings from Syncfusion support. 

 

Query: “But I would like to add filtering function with client data only. (filter the data displayed on the grid now). How to achieve it? Thanks.” 

 

We understand that you want to fetch data source remotely from your service and perform filter operation in client side (locally). We suggest you to achieve your requirement using Offline property of SfDatamanager and AllowFiltering property of Grid. While using the Offline property, during the initial rendering alone, request will be sent to webapi service.  

 

For all other actions like filtering, sorting, searching etc will take place locally. Kindly refer the below code example 

 

<SfGrid TValue="Order" AllowFiltering="true" AllowPaging="true"> 

    <SfDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/Orders" Offline="true" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

</SfGrid> 

 

      

Kindly download the sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/156236/ze/BlazorApp11074118360  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/data/how-to/offline-mode/ 

 

Kindly get back to us if you have further queries.  

 

Regards,
Vignesh Natarajan   

[Damh]

Hi, 

  Thanks! But I got an error:

Cannot deserialize the current JSON object (e.g. {"name":"value"}) into type 'System.Collections.Generic.List`1[NonQ_Report2_WebApi.Models.Part]' because the type requires a JSON array (e.g. [1,2,3]) to deserialize correctly.

To fix this error either change the JSON to a JSON array (e.g. [1,2,3]) or change the deserialized type so that it is a normal .NET type (e.g. not a primitive type like integer, not a collection type like an array or List<T>) that can be deserialized from a JSON object. JsonObjectAttribute can also be added to the type to force it to deserialize from a JSON object.

Path 'items', line 1, position 9.

  I guess it's related to the data return from the web api, what I returned is below format:

{
    Items: [{..}, {..}, {..}, ...],
    Count: 830
}

  Any suggesion? Thanks again.

[Vignesh Natarajan]

Hi Damh,  

 

Thank for the update. 

 

Query: “Thanks! But I got an error: && I guess it's related to the data return from the web api, what I returned is below format:” 

 

We have validated the reported issue at our end and data has to be returned in form of Items and Count from WebAPI service while using WebAPI adaptor. We need some details to validate the reported issue at our end. So kindly share the following details. 

 

1. Share your Grid code example.
2. Share the details about your server side code (how the data is returned from server).
3. Also share your Model class properties.
4. Please share your (Syncfusion.Blazor) Nuget package version details.
5. If possible try to reproduce the reported issue in provided sample (previous update) and get back to us.

 

Above requested details will be helpful for us to validate the reported issue at our end and provide solution as soon as possible.  

 

Regards,
Vignesh Natarajan  

 

 

[Damh]

Syncfusion.Blazor v18.2.0.45

Sorry, I don't share the server side codes directly. It's an ASP.NET core web api site, attached you can find the json result returned from it.

Thanks for your investigation.

Attachment: Temp_ddb72004.7z

[Damh]

I tried to return the data array directly (without items and count), the offline function can work. FYI

[Vignesh Natarajan]

Hi Damh,  

 

Sorry for the inconvenience caused.   

 

Query: “I tried to return the data array directly (without items and count), the offline function can work. FYI” 

 

Data has to be returned in form of Items and Count pair while using WebAPI Adaptor without Offline property. But when Offline property is enabled, entire data source has to be returned from the server as collection of objects. Please refer the below code example. We have differentiated both the actions (offline and server) using $inlinecount querystring value.    

 

[HttpGet] 

      public async Task<object> Get(int? code) 

      {            

          var count = order.Count(); 

          var queryString = Request.Query; 

          if (queryString.Keys.Contains("$inlinecount")) //$inlinecount will not present when Offline property is enabled. 

          { 

              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]) : order.Count();                 

              return new { Items = order, Count = order.Count() }; 

          } 

          else 

          { 

              return order; 

          }             

      } 

 

      

For your convenience we have prepared a sample using above solution which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/156236/ze/WebAPI1099173018  

 

Kindly get back to us if you have further queries.  

 

Regards,
Vignesh Natarajan 

[Damh]

Hi,

  Understood. Because the data is huge, it's not suitable to return the entire data. Another question, is there a standalone Blazor "pager component", then I can use it to control the datagrid. Thanks for your help.

[Vignesh Natarajan]

Hi Damh,  

 

Thanks for the update.  

 

Query: “Because the data is huge, it's not suitable to return the entire data. Another question, is there a standalone Blazor "pager component", then I can use it to control the datagrid” 

 

We have do not have support for separate Pager Component. From your query we suspect that you want to perform Paging action in server side and Filtering action in the Client data alone. If yes, then it is not possible to achieve using Offline property. Using Offline property all the actions including the paging will be performed in client. Hence entire data has to be returned from server.  

 

We suggest you to achieve your requirement using CustomAdaptor feature of DataManager. For each action request will be made to Read / ReadAsync method  of CustomAdaptor where data operations will be performed. We use DataManagerRequest class as an argument for Read Method, where we get the details about the current action in Grid.   

 

We have prepared a sample as per your requirement to perform Paging in Server side and Filtering action in Client side using CustomAdaptor and Service to make request to WebAPI Controller. Refer the below code example.  

 

<SfGrid @ref="PartsGrid" 

        TValue="ClosedPart" 

        AllowTextWrap="true" 

        AllowPaging="true" 

        AllowFiltering="true" 

        Query="@GridQuery" 

        AllowResizing="true" 

        AllowSelection="true" 

        EnableHover="false" 

        FrozenColumns="1" 

        ContextMenuItems="@(new List<ContextMenuItemModel>() { 

                                            new ContextMenuItemModel { 

                                                //Text = "Rollback", Target = ".e-content", Id = "rollback", IconCss = "e-icons e-undo-icon" 

                                            } 

                                        })" 

        Width="100%" Height="100%"> 

    <GridPageSettings PageSize="3"></GridPageSettings> 

    <SfDataManager Adaptor="Adaptors.CustomAdaptor"> 

        <AdaptorComponent></AdaptorComponent> 

    </SfDataManager> 

    <GridColumns> 

        <GridColumn Field=@nameof(ClosedPart.Obid) HeaderText="Part" Width="100"></GridColumn> 

        <GridColumn Field=@nameof(ClosedPart.Buyer) HeaderText="Buyer" Width="100"></GridColumn> 

        <GridColumn Field=@nameof(ClosedPart.CreationDate) HeaderText="Creation Date" Width="100"></GridColumn> 

        <GridColumn Field=@nameof(ClosedPart.Remark) HeaderText="Remark" Width="100"></GridColumn> 

    </GridColumns> 

</SfGrid> 

 

public override async Task<object> ReadAsync(DataManagerRequest dm, string key = null)    {        await Task.Yield();        int count = 0;        if (Data != null && dm.Where != null)        {            Data = Data;        }        else if(dm.Where == null)        {            Data = await Service.GetPeople(dm.Skip, dm.Take); // request the service from whether httpClient is used to call controller            count = Data.Count;        }        IEnumerable<ClosedPart> DataSource = (IEnumerable<ClosedPart>)Data.Items.AsQueryable();        if (dm.Where != null && dm.Where.Count > 0) // Filtering at client side data        {            DataSource = DataOperations.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);            count = DataSource.Count<ClosedPart>();        }        return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource;    }

 

  

Kindly download the sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/156236/ze/WebAPI_-_CustomAdaptor-994646608  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/custom-binding/#custom-adaptor-as-component  

 

Please get back to us if you have further queries.  

 

Regards 

Vignesh Natarajan 

[Damh]

No more question now, thanks for your great help!

[Renjith Singh Rajendran]

Hi Damh, 

Thanks for your update. 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran