grid header filter values not showing in large data set with custom adapter

[Surendar V]

I have used Custom adapter for filter, pagination, sorting and search. All are working fine but when I have large data set in the employee table then the grid filter option values are not showing in any column.

When i debugged, when i click header filter icon of the any column, the readasync has called with Select array value as "Email" in DataManagerRequest. 

I get those distinct column values from the EF and send to readasync method as dataresult but no luck still options are not loading.

Its a sample app only. Kindly try to repoduce it yourside. 

DB is in the db backup folder.

@page "/employees"

@using Newtonsoft.Json

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Data

@using System.Text.Json

@using System.Text.Json.Serialization

@{

    var Tool = (new List<string>() { "Search" });

}

<SfGrid TValue="Employee" Toolbar=@Tool AllowSorting="true" AllowPaging="true" AllowFiltering="true" EnableHover="true" AllowResizing="true">

    <SfDataManager Adaptor="Adaptors.CustomAdaptor" AdaptorInstance="typeof(CustomEmployeeAdaptor)" />

    <GridPageSettings PageSize="10"></GridPageSettings>

    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.CheckBox"></GridFilterSettings>

    <GridColumns>

        <GridColumn Field=@nameof(Employee.Name) HeaderText="Name" TextAlign="TextAlign.Left" Width="150"></GridColumn>

        <GridColumn Field=@nameof(Employee.Age) HeaderText="Age" TextAlign="TextAlign.Right" Width="100"></GridColumn>

        <GridColumn Field=@nameof(Employee.Email) HeaderText="Email" TextAlign="TextAlign.Left" Width="200"></GridColumn>

        <GridColumn Field=@nameof(Employee.Mobile) HeaderText="Mobile" TextAlign="TextAlign.Left" Width="150"></GridColumn>

        <GridColumn Field=@nameof(Employee.Country) HeaderText="Country" TextAlign="TextAlign.Left" Width="150"></GridColumn>

    </GridColumns>

</SfGrid>

@code {

    public class CustomEmployeeAdaptor : DataAdaptor

    {

        private readonly HttpClient _httpClient;

        public CustomEmployeeAdaptor(HttpClient httpClient)

        {

            _httpClient = httpClient;

        }

        public override async Task<object> ReadAsync(DataManagerRequest dm, string key = null)

        {

            var response = await _httpClient.PostAsJsonAsync("api/Employee", dm);

            if (!response.IsSuccessStatusCode)

            {

                return new DataResult { Result = new List<object>(), Count = 0 };

            }

            var jsonResponse = await response.Content.ReadAsStringAsync();

            Console.WriteLine("API Response: " + jsonResponse); // Log the response

            try

            {

                if (dm.Select != null && dm.Select.Any())

                {

                    var dataWrapper = JsonConvert.DeserializeObject<DataWrapper<object>>(jsonResponse);

                    var dataResult = new DataResult { Result = dataWrapper.Result};

                    return dataResult;

                }

                else

                {

                    var dataWrapper = JsonConvert.DeserializeObject<DataWrapper<Employee>>(jsonResponse);

                    var dataResult = new DataResult { Result = dataWrapper.Result, Count = dataWrapper.Count };

                    return dataResult;

                }

            }

            catch (Exception ex)

            {

                throw;

            }

        }

    }

    public class DataWrapper<T>

    {

        public List<T> Result { get; set; }

        public int Count { get; set; }

    }

}

using Microsoft.AspNetCore.Mvc;

using Microsoft.EntityFrameworkCore;

using Syncfusion.Blazor;

using Syncfusion.Blazor.Data;

namespace WebApplication1.Controllers

{

    [Route("api/[controller]")]

    [ApiController]

    public class EmployeeController : ControllerBase

    {

        private readonly AppDbContext _context;

        public EmployeeController(AppDbContext context)

        {

            _context = context;

        }

        [HttpPost]

        public async Task<IActionResult> GetEmployees([FromBody] DataManagerRequest dm)

        {

            var query = _context.Employees.AsQueryable();

            try

            {

                if (dm.Search != null && dm.Search.Any())

                {

                    query = DataOperations.PerformSearching(query, dm.Search);

                }

                // ✅ Apply Filtering

                if (dm.Where != null && dm.Where.Count > 0)

                {

                    query = DataOperations.PerformFiltering(query, dm.Where, dm.Where[0].Operator);

                }

                // ✅ Apply Sorting

                if (dm.Sorted != null && dm.Sorted.Count > 0)

                {

                    query = DataOperations.PerformSorting(query, dm.Sorted);

                }

                if (dm.Select != null && dm.Select.Any())

                {

                    var columnName = dm.Select.FirstOrDefault();

                    var res = query.Select(u => EF.Property<object>(u, columnName))

                                   .Distinct()

                                   .ToList();

                    return Ok(new DataResult { Result = res });

                }

                else

                {

                    int count = await query.CountAsync(); // Get total count before paging

                    if (dm.Skip > 0) query = DataOperations.PerformSkip(query, dm.Skip);

                    if (dm.Take > 0) query = DataOperations.PerformTake(query, dm.Take);

                    return Ok(new DataResult<Employee> { Result = await query.ToListAsync(), Count = count });

                }

            }

            catch (Exception ex)

            {

                return BadRequest(new { result = ex.Message });

            }

        }

    }

}

Attachment: BlazorApp1_120a2a62.zip

[Surendar V]

Anyone help me on this please. 

[Getsy Edwin]

Hi Surendar,

Our tech team is validating your reported issue and will update the response by tomorrow at the earliest. Appreciate your patience until then.

Regards,

Getsy

 

[Vignesh Natarajan]

Hi Surendar,

Sorry for the delay in getting back to you.

We have analyzed your query, and we understand that you are facing issue when trying to populate the Excel filter dialog. Also we found that you have tried to populate the Grid component using Custom Adaptor and by calling a Post method in controller to return the data.

We have provided support for various adaptor to bind data to the Grid. Refer to our UG documentation for your reference

Microsoft SQL Data Binding in Blazor DataGrid Component | Syncfusion – directly you can bind the SQL data to grid using Custom adaptor
Microsoft SQL Data Binding in Blazor DataGrid Component | Syncfusion – you can bind the SQL data to Grid using Url Adaptor.

But in your sample you have used combination of CustomAdaptor and Url adaptor which causes the reported issue when opening the filter. To display the values properly in excel dialog, specific data must be returned in form of objects. In your sample, values will be selected in Controller and returned as object to CustomAdaptor where data is not returned properly.

So we request you to either use CustomAdaptor to bind the SQL data directly or use URL adaptor to bind data remotely to Grid component. We have modified the attached sample to display the values in grid using URL adaptor and now the values are displayed properly in excel filter too.

Refer to the modified sample in the attachment for your reference. Please get back to us if you have any queries.  

Regards,

Vignesh Natarajan

Attachment: BlazorApp1_5244e3a4.zip

[Surendar V]

                <SfGrid @ref="rolloverGridRef" TValue="RolloverAssignmentViewModel" Toolbar=@Tool AllowSorting="true" AllowPaging="true" AllowFiltering="true" AllowExcelExport="true" EnableHover="true" AllowResizing="true" PersistSelection="true">

                    <SfDataManager Url="https://localhost:7148/api/Rollover/GetRolloverList1" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>

                    <GridEvents OnToolbarClick="ToolbarClickHandler" TValue="RolloverAssignmentViewModel"></GridEvents>

                    <GridPageSettings PageSize="@pageSize" PageSizes="@(new string[] { "50", "100", "1000", "1500", "All" })" />

                    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>

                    <GridColumns>

                        <!-- Checkbox Column -->

                        <GridColumn Width="50">

                            <HeaderTemplate>

                                <input type="checkbox" @onchange="ToggleSelectAll" />

                            </HeaderTemplate>

                            <Template>

                                @{

                                    var cnxt = (context as RolloverAssignmentViewModel);

                                    <input type="checkbox" checked="@cnxt?.IsSelected" @onchange="@(e => ToggleRowSelection(cnxt, e))" />

                                }

                            </Template>

                        </GridColumn>

                        <GridColumn Field=@nameof(RolloverAssignmentViewModel.RolloverId) HeaderText="RolloverId" Visible="false"></GridColumn>

                        <GridColumn Field=@nameof(RolloverAssignmentViewModel.ExpiryDate) HeaderText="Expiry Date" Format="dd-MM-yyyy" Type="Syncfusion.Blazor.Grids.ColumnType.Date"></GridColumn>

                        <GridColumn Field=@nameof(RolloverAssignmentViewModel.Name) HeaderText="Name"></GridColumn>

                        <GridColumn Field=@nameof(RolloverAssignmentViewModel.MobileNo) HeaderText="Mobile No"></GridColumn>

                        <GridColumn Field=@nameof(RolloverAssignmentViewModel.Address) HeaderText="Email"></GridColumn>

                        <GridColumn Field=@nameof(RolloverAssignmentViewModel.Make) HeaderText="Make"></GridColumn>

                        <GridColumn Field=@nameof(RolloverAssignmentViewModel.Model) HeaderText="Model"></GridColumn>

                        <GridColumn Field=@nameof(RolloverAssignmentViewModel.ManctYear) HeaderText="Manct. Year"></GridColumn>

                        <GridColumn Field=@nameof(RolloverAssignmentViewModel.City) HeaderText="City"></GridColumn>

                        <GridColumn Field=@nameof(RolloverAssignmentViewModel.Dealer) HeaderText="Dealer"></GridColumn>

                    </GridColumns>

                </SfGrid>

URL dataAdapter is working fine but i need those from and to date need to be applied on the grid as well.

[Surendar V]

                <SfGrid @ref="rolloverGridRef" TValue="RolloverAssignmentViewModel" Toolbar=@Tool AllowSorting="true" AllowPaging="true" AllowFiltering="true" AllowExcelExport="true" EnableHover="true" AllowResizing="true" PersistSelection="true">

                    <SfDataManager Url="https://localhost:7148/api/Rollover/GetRolloverList1" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>

                    <GridEvents OnToolbarClick="ToolbarClickHandler" TValue="RolloverAssignmentViewModel"></GridEvents>

                    <GridPageSettings PageSize="@pageSize" PageSizes="@(new string[] { "50", "100", "1000", "1500", "All" })" />

                    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>

                    <GridColumns>

                        <!-- Checkbox Column -->

                        <GridColumn Width="50">

                            <HeaderTemplate>

                                <input type="checkbox" @onchange="ToggleSelectAll" />

                            </HeaderTemplate>

                            <Template>

                                @{

                                    var cnxt = (context as RolloverAssignmentViewModel);

                                    <input type="checkbox" checked="@cnxt?.IsSelected" @onchange="@(e => ToggleRowSelection(cnxt, e))" />

                                }

                            </Template>

                        </GridColumn>

                        <GridColumn Field=@nameof(RolloverAssignmentViewModel.RolloverId) HeaderText="RolloverId" Visible="false"></GridColumn>

                        <GridColumn Field=@nameof(RolloverAssignmentViewModel.ExpiryDate) HeaderText="Expiry Date" Format="dd-MM-yyyy" Type="Syncfusion.Blazor.Grids.ColumnType.Date"></GridColumn>

                        <GridColumn Field=@nameof(RolloverAssignmentViewModel.Name) HeaderText="Name"></GridColumn>

                        <GridColumn Field=@nameof(RolloverAssignmentViewModel.MobileNo) HeaderText="Mobile No"></GridColumn>

                        <GridColumn Field=@nameof(RolloverAssignmentViewModel.Address) HeaderText="Email"></GridColumn>

                        <GridColumn Field=@nameof(RolloverAssignmentViewModel.Make) HeaderText="Make"></GridColumn>

                        <GridColumn Field=@nameof(RolloverAssignmentViewModel.Model) HeaderText="Model"></GridColumn>

                        <GridColumn Field=@nameof(RolloverAssignmentViewModel.ManctYear) HeaderText="Manct. Year"></GridColumn>

                        <GridColumn Field=@nameof(RolloverAssignmentViewModel.City) HeaderText="City"></GridColumn>

                        <GridColumn Field=@nameof(RolloverAssignmentViewModel.Dealer) HeaderText="Dealer"></GridColumn>

                    </GridColumns>

                </SfGrid>

URL dataAdapter is working fine but i need those from and to date need to be applied on the grid as well.

[Naveen Palanivel]

Hi Surendar,

We would like to inform you that you can perform the filtering action within a range of date values by rendering the SfDateRangePicker component. We have already discussed similar topics in detail in our documentation. Based on that, you can achieve your requirement on your end. Kindly refer to the documentation for your reference.

Documentation: https://blazor.syncfusion.com/documentation/datagrid/filter-menu#filtering-using-daterangepicker

Please let us know if you have any concerns.

Regards,

Naveen Palanivel