Change the Boolean Filtering Options in a FilterRow Dropdown

Environment

Product

Grid for Blazor

Description

This KB article answers the following questions:

• How to change the default is true and is false text in the Grid FilterRow dropdown?
• How to change the default display names in the FilterRow dropdown?
• How to filter boolean Grid column values by null?
• How to change the default values in the FilterRow dropdown to Yes and No?

Solution

1. Define a Filter Row Template.
2. Create a DropDownList that includes the custom display values.
3. Create a Button that will replicate the FilterRow clear button.
4. Implement a method that manually filters the Grid based on the DropDownList selection.

Grid with custom display values in the FilterRow dropdown and manual filtering.

@using Telerik.DataSource

<TelerikGrid Data=@GridData FilterMode="GridFilterMode.FilterRow"
             Pageable="true" Height="400px" Width="800px" PageSize="@GridData.Count()">
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Name) />
        <GridColumn Field=@nameof(Employee.AgreesToTermsAndConditions) Title="Agreed to Terms">
            <FilterCellTemplate>

                @* Dropdown list for selecting filter options *@
                <TelerikDropDownList Data="@FilterOptions" Value="@DropDownListValue"
                                     ValueChanged="@((string newValue) => ApplyFilter(newValue, context))">
                    <DropDownListSettings>
                        <DropDownButtonPopupSettings Height="auto" />
                    </DropDownListSettings>
                </TelerikDropDownList>

                @* Button to clear the filter *@
                <TelerikButton ButtonType="ButtonType.Button"
                               Class="k-clear-button-visible ml-2"
                               Icon="@SvgIcon.FilterClear"
                               Enabled="@(DropDownListValue != DefaultFilterOption)"
                               OnClick="@(async () =>
                                          {
                                              await context.ClearFilterAsync();
                                              DropDownListValue = DefaultFilterOption;
                                          })">
                </TelerikButton>
            </FilterCellTemplate>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    private List<Employee> GridData { get; set; } = new();

    private string DefaultFilterOption { get; set; }

    // Custom options for the dropdown filter
    private List<string> FilterOptions { get; set; } = new();

    // Selected value in the dropdown filter
    private string DropDownListValue { get; set; }

    // Method to apply the filter based on the selected value in the dropdown
    private async Task ApplyFilter(string newValue, FilterCellTemplateContext context)
    {
        DropDownListValue = newValue;

        var filter = context.FilterDescriptor.FilterDescriptors[0] as FilterDescriptor;
        if (filter != null)
        {
            switch (DropDownListValue)
            {
                case "Yes":
                    filter.Value = true;
                    filter.Operator = FilterOperator.IsEqualTo;
                    break;
                case "No":
                    filter.Value = false;
                    filter.Operator = FilterOperator.IsEqualTo;
                    break;
                case "Unknown":
                    filter.Value = null;
                    filter.Operator = FilterOperator.IsNull;
                    break;
                case "All":
                    await context.ClearFilterAsync();
                    return;
            }

            // Apply the filter
            await context.FilterAsync();
        }
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 30; i++)
        {
            GridData.Add(new Employee
                {
                    EmployeeId = i,
                    Name = $"Employee {i}",
                    AgreesToTermsAndConditions = (i % 5 == 0) ? null : (i % 3 == 0)
                });
        }

        DefaultFilterOption = Enum.GetNames(typeof(FilterOption)).First();
        DropDownListValue = DefaultFilterOption;
        FilterOptions = Enum.GetNames(typeof(FilterOption)).ToList();
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; } = string.Empty!;
        public bool? AgreesToTermsAndConditions { get; set; }
    }

    public enum FilterOption
    {
        All,
        Yes,
        No,
        Unknown
    }
}

See Also

• Grid Filtering
• Grid Filter Templates
• Grid Filter From Code
• Use Filter Operator Drop-Down in Filter Template