<TelerikGrid Data="@RecordList"
                         SelectionMode="GridSelectionMode.Multiple"
                         Width="100%"
                         Pageable="true"
                         PageSize="@PageSize"
                         FilterMode="@GridFilterMode.FilterRow"
                         Sortable="true"
                         Groupable="false"
                         Height="760px"
                         Resizable="true">
                <GridColumns>                    
                    <GridColumn Width="200px" Field="@nameof(Demo.Name)" Title="@L["Name"]">
                        <FilterCellTemplate>
                            <CustomListRowFilter Context="@context" ListValues="EmployeeFilterList" AddNoneItem="false" />
                        </FilterCellTemplate>
                    </GridColumn>                   
                    <GridColumn Width="200px" Field="@nameof(Demo.Datum)" Title="@L["Date"]">
                        <FilterCellTemplate>
                            <CustomDateSpanRowFilter Context="@context" InitialValueFrom="@InitialDateFromFilter" InitialValueTo="@InitialDateToFilter" />
                        </FilterCellTemplate>
                    </GridColumn>
                    <GridColumn Width="200px" Field="@nameof(Demo.Hours)" Title="@L["Hours"]">
                        <FilterCellTemplate>
                            <CustomNumberRowFilter Context="@context" />
                        </FilterCellTemplate>
                        <FooterTemplate>
                            <span>Total: @context.Sum?.ToString("0.00")</span>
                        </FooterTemplate>
                    </GridColumn>
                    <GridColumn Width="200px" Field="@nameof(Demo.Checked)" Title="@L["Checked"]">
                        <FilterCellTemplate>
                            <CustomBooleanRowFilter Context="@context" InitialValue="false" />
                        </FilterCellTemplate>
                        <Template>
                            <input type="checkbox" checked="@(((Demo) context).Checked)" @onchange="@(args => OnCheckChanged((Demo) context, args))" />
                        </Template>
                    </GridColumn>
                </GridColumns>
                <GridAggregates>
                    <GridAggregate Field=@nameof(Demo.Hours) Aggregate="@GridAggregateType.Sum" />
                </GridAggregates>
            </TelerikGrid>

<select value="@Value" @onchange="OnFilterChanged">
    <option value="@string.Empty">All</option>
    <option value="True">True</option>
    <option value="False">False</option>
</select>

@code {
        private string Field { get; set; }
        private string Value { get; set; }
        private bool? _boolValue;
        [Parameter]
        public FilterCellTemplateContext Context { get; set; }
        [Parameter]
        public bool? InitialValue { get; set; }

        protected override async Task OnInitializedAsync()
        {
            Field = ((FilterDescriptor) Context.FilterDescriptor.FilterDescriptors[0])?.Member;
            if (InitialValue != null)
            {
                SetValue(InitialValue.Value);
                await SetFilter();
            }
            else
            {
                SetValue(((FilterDescriptor)Context.FilterDescriptor.FilterDescriptors[0]).Value);
            }
        }

        private void SetValue(object value)
        {
            if (string.IsNullOrEmpty(value?.ToString()) || value.ToString() == "All")
            {
                _boolValue = null;
                Value = string.Empty;
            }
            else
            {
                bool.TryParse(value.ToString(), out var parseResult);
                _boolValue = parseResult;
                Value = _boolValue.ToString();
            }
        }
        
        protected async Task OnFilterChanged(ChangeEventArgs args)
        {
            var value = args.Value;
            SetValue(value);
            await SetFilter();
        }

        private async Task SetFilter()
        {
            if (_boolValue != null)
            {
                var filterDescriptors = Context.FilterDescriptor.FilterDescriptors.Where(descriptor =>
                    ((FilterDescriptor)descriptor).Member == Field).ToList();

                var filterDescriptor = (FilterDescriptor) filterDescriptors[0];
                filterDescriptor.Value = _boolValue;
                
                ((FilterDescriptor)filterDescriptors[0]).Operator = FilterOperator.IsEqualTo;
                await Context.FilterAsync();
            }
            else
            {
                await Context.ClearFilterAsync();
            }
        }
    }

<TelerikGrid Data="strategicLevelItems" SelectedItems="selectedStrategic" Width="100%" Height="500px"
                                 ScrollMode="GridScrollMode.Scrollable" SelectionMode="GridSelectionMode.Multiple"
                                 SelectedItemsChanged="@((IEnumerable<GetNavigationNodesModel> strategicItems) => OnStrategicSelectAsync(strategicItems))"
                                 FilterMode="GridFilterMode.FilterRow">
                        <GridColumns>
                            <GridCheckboxColumn SelectAll="true" Width="40px" OnCellRender="@GridHelpers.CenterAlign" />
                            <GridColumn Field="@(nameof(GetNavigationNodesModel.Name))" />
                        </GridColumns>
                    </TelerikGrid>

    private async Task OnStrategicSelectAsync(IEnumerable<GetNavigationNodesModel> selectedItems)
    {
        selectedStrategic = selectedItems;

        var state = tacticalGrid.GetState();

        var compositeFilter = new CompositeFilterDescriptor() { LogicalOperator = FilterCompositionLogicalOperator.Or };
        foreach (var item in selectedItems)
        {
            compositeFilter.FilterDescriptors.Add(new FilterDescriptor()
            {
                Member = "ParentId",
                Operator = FilterOperator.IsEqualTo,
                Value = item.Id
            });
        }

        state.FilterDescriptors.Clear();
        state.FilterDescriptors.Add(compositeFilter);

        await tacticalGrid.SetState(state);
    }

        <div class="flex-child">
            <label for="warehouse" class="k-label k-form-label">Warehouse</label>
            <TelerikDropDownList Data="@Warehouses" DefaultText="Select a Warehouse"
                                 Id="warehouse"
                                 TextField="WarehouseName"
                                 ValueField="WarehouseId"
                                 ValueChanged="@((int w) => WarehouseSelected(w))" />
        </div>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CalendarDemo.UI</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="CalendarDemo.UI.styles.css" rel="stylesheet" />
    <link href="css/CustomStyles.css" rel="stylesheet" />
    <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>

</head>