I want to do a filtered search in an integer column in RadzenDataGrid when FilterMode is CheckBoxList #1784

Closed
opened 2026-01-29 17:58:35 +00:00 by claunia · 1 comment
Owner

Originally created by @lianzx3 on GitHub (Jun 11, 2025).

Is your feature request related to a problem? Please describe.
I want to do a filtered search in an integer column (like 'Order ID' in code) but it is disabled in RadzenDataGrid when FilterMode is CheckBoxList.

Describe the solution you'd like
I want to filter search in integer column like string column ('Customer' column in code). Support partial word searching when FilterMode is CheckBoxList.

Describe alternatives you've considered
I tried to use <FilterTemplate><RadzenDropDown /></FilterTemplate> and the RadzenDropDown support integer search (like 'Employee ID' column).

Additional context

Order ID column can not to do filter search:
Image

Employee ID column can do filter search by RadzenDropDown :
Image

Company Name column can do filter search with string type:
Image

Code:

@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore

@inherits DbContextPage

<RadzenDataGrid @ref="grid" AllowFiltering="true" IsLoading="@isLoading" TItem="Order"
        FilterMode="FilterMode.CheckBoxList" AllowPaging="true"
        Data="@orders" Count="@count" LoadData="@LoadData" LoadColumnFilterData="@LoadColumnFilterData">
    <Columns>
        <RadzenDataGridColumn Property="OrderID" Title="Order ID" />
        <RadzenDataGridColumn Property="EmployeeID" Title="Employee ID" FilterMode="FilterMode.Advanced" FilterValue="@selectedEmployeeID">
            <FilterTemplate>
                <RadzenDropDown @bind-Value=@selectedEmployeeID Style="width:100%" Change=@OnSelectedEmployeeIDChange Data="@employeeIDs" AllowFiltering="true" />
            </FilterTemplate>
        </RadzenDataGridColumn>        
        <RadzenDataGridColumn Property="Customer.CompanyName" Title="Customer" />
    </Columns>
</RadzenDataGrid>

@code {
    NorthwindODataService service = new NorthwindODataService("https://services.radzen.com/odata/Northwind/");

    RadzenDataGrid<Order> grid;

    IEnumerable<Order> orders;
    IEnumerable<int?> employeeIDs;
    int? selectedEmployeeID;
    int count;
    bool isLoading;

    async Task LoadData(LoadDataArgs args)
    {
        isLoading = true;

        var result = await service.GetOrders(filter: args.Filter, top: args.Top, skip: args.Skip, orderby: args.OrderBy, count: true, expand: "Customer,Employee");
        
        orders = result.Value.AsODataEnumerable();
        count = result.Count;
        employeeIDs = orders.Select(order=>order.EmployeeID).Distinct().ToList();

        isLoading = false;
    }

    async Task LoadColumnFilterData(DataGridLoadColumnFilterDataEventArgs<Order> args)
    {
        var property = args.Column.GetFilterProperty().Replace(".","/");

        var result = await service.GetOrders(
            count: true, 
            filter: !string.IsNullOrEmpty(args.Filter) ? $"contains(tolower({property}), tolower('{args.Filter}'))" : null, 
            apply: $"groupby(({property}))", 
            expand: GetODataExpand(property));

        args.Count = result.Count;
        args.Data = result.Value;
    }

    string GetODataExpand(string property)
    {
        var properties = property.Split("/");
        return properties.Count() > 1 ? $"{string.Join("/", properties.Take(properties.Length - 1))}($select={properties.LastOrDefault()})" : null;
    }
    
    async Task OnSelectedEmployeeIDChange(object value)
    {
        await grid.FirstPage();
    }
}
Originally created by @lianzx3 on GitHub (Jun 11, 2025). **Is your feature request related to a problem? Please describe.** I want to do a filtered search in an integer column (like 'Order ID' in code) but it is disabled in RadzenDataGrid when FilterMode is CheckBoxList. **Describe the solution you'd like** I want to filter search in integer column like string column ('Customer' column in code). Support partial word searching when FilterMode is CheckBoxList. **Describe alternatives you've considered** I tried to use `<FilterTemplate><RadzenDropDown /></FilterTemplate>` and the RadzenDropDown support integer search (like 'Employee ID' column). **Additional context** Order ID column can not to do filter search: ![Image](https://github.com/user-attachments/assets/36a5d6eb-5c5e-4d80-82a7-15792608e6b0) Employee ID column can do filter search by RadzenDropDown : ![Image](https://github.com/user-attachments/assets/84f8730e-1495-4dff-bd80-e05411ba57bf) Company Name column can do filter search with string type: ![Image](https://github.com/user-attachments/assets/1903017d-d2e6-440d-ae28-71849083f93b) Code: ``` @using RadzenBlazorDemos.Data @using RadzenBlazorDemos.Models.Northwind @using Microsoft.EntityFrameworkCore @inherits DbContextPage <RadzenDataGrid @ref="grid" AllowFiltering="true" IsLoading="@isLoading" TItem="Order" FilterMode="FilterMode.CheckBoxList" AllowPaging="true" Data="@orders" Count="@count" LoadData="@LoadData" LoadColumnFilterData="@LoadColumnFilterData"> <Columns> <RadzenDataGridColumn Property="OrderID" Title="Order ID" /> <RadzenDataGridColumn Property="EmployeeID" Title="Employee ID" FilterMode="FilterMode.Advanced" FilterValue="@selectedEmployeeID"> <FilterTemplate> <RadzenDropDown @bind-Value=@selectedEmployeeID Style="width:100%" Change=@OnSelectedEmployeeIDChange Data="@employeeIDs" AllowFiltering="true" /> </FilterTemplate> </RadzenDataGridColumn> <RadzenDataGridColumn Property="Customer.CompanyName" Title="Customer" /> </Columns> </RadzenDataGrid> @code { NorthwindODataService service = new NorthwindODataService("https://services.radzen.com/odata/Northwind/"); RadzenDataGrid<Order> grid; IEnumerable<Order> orders; IEnumerable<int?> employeeIDs; int? selectedEmployeeID; int count; bool isLoading; async Task LoadData(LoadDataArgs args) { isLoading = true; var result = await service.GetOrders(filter: args.Filter, top: args.Top, skip: args.Skip, orderby: args.OrderBy, count: true, expand: "Customer,Employee"); orders = result.Value.AsODataEnumerable(); count = result.Count; employeeIDs = orders.Select(order=>order.EmployeeID).Distinct().ToList(); isLoading = false; } async Task LoadColumnFilterData(DataGridLoadColumnFilterDataEventArgs<Order> args) { var property = args.Column.GetFilterProperty().Replace(".","/"); var result = await service.GetOrders( count: true, filter: !string.IsNullOrEmpty(args.Filter) ? $"contains(tolower({property}), tolower('{args.Filter}'))" : null, apply: $"groupby(({property}))", expand: GetODataExpand(property)); args.Count = result.Count; args.Data = result.Value; } string GetODataExpand(string property) { var properties = property.Split("/"); return properties.Count() > 1 ? $"{string.Join("/", properties.Take(properties.Length - 1))}($select={properties.LastOrDefault()})" : null; } async Task OnSelectedEmployeeIDChange(object value) { await grid.FirstPage(); } } ```
Author
Owner

@javierlatorrep commented on GitHub (Jun 12, 2025):

Thanks!! 🙌🏼

@javierlatorrep commented on GitHub (Jun 12, 2025): Thanks!! 🙌🏼
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1784