Filter Nullable Bool Grid Column by Null Value

Environment

Product

Grid for Blazor TreeList for Blazor

Description

This KB article explains how to programmatically filter a Grid column bound to a bool? by the null values.

Solution

To filter a Grid column bound to a bool? by the null values:

1. Get the current Grid state.
2. Create a CompositeFilterDescriptor for the desired column. Add a child FilterDescriptor with an Operator property that is equal to FilterOperator.IsNull.
3. Add the new CompositeFilterDescriptor to the FilterDescriptors property of the Grid state.
4. Use the Grid SetStateAsync method to update the Grid state.

Alternative options are to:

• Customize the Grid filter state in the Grid OnStateInit event.
• Use a Grid filter template to enable filtering by null from the Grid's UI.

Fitler bool? Grid column by null

@using Telerik.DataSource

<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
               OnClick="@SetGridFilter">Filter On Leave By Null</TelerikButton>

<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             Pageable="true"
             FilterMode="@GridFilterMode.FilterMenu"
             Height="400px">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" />
        <GridColumn Field="@(nameof(SampleData.Team))" />
        <GridColumn Field="@(nameof(SampleData.IsOnLeave))" Title="On Leave" />
    </GridColumns>
</TelerikGrid>

@code {
    private TelerikGrid<SampleData>? GridRef { get; set; }

    private List<SampleData> GridData { get; set; } = new();

    private async Task SetGridFilter()
    {
        GridState<SampleData> currentState = GridRef!.GetState();

        currentState.FilterDescriptors = new List<IFilterDescriptor>()
        {
            new CompositeFilterDescriptor()
            {
                FilterDescriptors = new FilterDescriptorCollection() {
                    // Use the IsNull filter operator when filtering by null values.
                    new FilterDescriptor()
                    {
                        Member = nameof(SampleData.IsOnLeave),
                        MemberType = typeof(bool?),
                        Operator = FilterOperator.IsNull
                    }
                }
            }
        };

        await GridRef.SetStateAsync(currentState);
    }

    protected override void OnInitialized()
    {
        GridData = Enumerable.Range(1, 30).Select(x => new SampleData
        {
            Id = x,
            Name = $"Name {x}",
            Team = $"Team {x % 4 + 1}",
            IsOnLeave = GetRandomNullableBool(x)
        }).ToList();
    }

    private bool? GetRandomNullableBool(int index)
    {
        if (index % 5 == 0)
        {
            return null;
        }

        return Random.Shared.Next(2) == 0 ? false : true;
    }

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Team { get; set; } = string.Empty;
        public bool? IsOnLeave { get; set; }
        public DateTime HireDate { get; set; }
    }
}

See Also

• FilterMenu: Filter From Code
• Working with the Grid State