@using System.ComponentModel.DataAnnotations

<TelerikGrid Data="@GridData"
             EditMode="@GridEditMode.Incell"
             OnEdit="@OnGridEdit"
             OnUpdate="@OnGridUpdate">
    <GridColumns>
        <GridColumn Field="@nameof(SampleModel.Name)" />
        <GridColumn Field="@nameof(SampleModel.Min)" />
        <GridColumn Field="@nameof(SampleModel.Max)" />
    </GridColumns>
</TelerikGrid>

<TelerikNotification @ref="@NotificationRef"
                     HorizontalPosition="@NotificationHorizontalPosition.Center"
                     VerticalPosition="@NotificationVerticalPosition.Top" />

@code {
    private TelerikNotification? NotificationRef { get; set; }

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

    private bool ShouldCancelOnEdit { get; set; }

    private int LastId { get; set; }

    private void OnGridEdit(GridCommandEventArgs args)
    {
        if (ShouldCancelOnEdit)
        {
            ShouldCancelOnEdit = false;
            args.IsCancelled = true;
        }
    }

    private void OnGridUpdate(GridCommandEventArgs args)
    {
        var updatedItem = (SampleModel)args.Item;

        if (updatedItem.Min > updatedItem.Max)
        {
            NotificationRef?.Show(new NotificationModel()
            {
                ThemeColor = ThemeConstants.Notification.ThemeColor.Error,
                Text = "Min must be smaller than Max"
            });

            args.IsCancelled = true;
            ShouldCancelOnEdit = true;
        }
        else
        {
            var originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);

            if (originalItemIndex != -1)
            {
                GridData[originalItemIndex] = updatedItem;
            }

            ShouldCancelOnEdit = false;
        }
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 5; i++)
        {
            GridData.Add(new SampleModel()
            {
                Id = ++LastId,
                Name = $"SampleModel {LastId}",
                Min = Random.Shared.Next(1, 10),
                Max = Random.Shared.Next(11, 20)
            });
        }
    }

    public class SampleModel
    {
        public int Id { get; set; }
        [Required]
        public string Name { get; set; } = string.Empty;
        public int Min { get; set; }
        public int Max { get; set; }
    }
}

@using Telerik.DataSource

<h2>No Aggregates</h2>

<p><code>OnStateInitCounter1:</code> @OnStateInitCounter1</p>
<TelerikGrid Data="@GridData"
             TItem="@SampleModel"
             Groupable="true"
             OnStateInit="@OnGridStateInit1">
    <GridAggregates>

    </GridAggregates>
    <GridColumns>
        <GridColumn Field="@nameof(SampleModel.Name)" />
        <GridColumn Field="@nameof(SampleModel.GroupName)" />
    </GridColumns>
</TelerikGrid>

<h2>With Aggregates</h2>

<p><code>OnStateInitCounter2:</code> @OnStateInitCounter2</p>
<TelerikGrid Data="@GridData"
             TItem="@SampleModel"
             Groupable="true"
             OnStateInit="@OnGridStateInit2">
    <GridAggregates>
        <GridAggregate Field="@nameof(SampleModel.Name)" Aggregate="@GridAggregateType.Count" />
    </GridAggregates>
    <GridColumns>
        <GridColumn Field="@nameof(SampleModel.Name)" />
        <GridColumn Field="@nameof(SampleModel.GroupName)" />
    </GridColumns>
</TelerikGrid>

<h2>With Aggregates and Workaround</h2>

<p><code>OnStateInitCounter3:</code> @OnStateInitCounter3</p>
<TelerikGrid Data="@GridData"
             TItem="@SampleModel"
             Groupable="true"
             OnStateInit="@OnGridStateInit3">
    <GridAggregates>
        <GridAggregate Field="@nameof(SampleModel.Name)" Aggregate="@GridAggregateType.Count" />
    </GridAggregates>
    <GridColumns>
        <GridColumn Field="@nameof(SampleModel.Name)" />
        <GridColumn Field="@nameof(SampleModel.GroupName)" />
    </GridColumns>
</TelerikGrid>

@code {
    private int OnStateInitCounter1 { get; set; }
    private int OnStateInitCounter2 { get; set; }
    private int OnStateInitCounter3 { get; set; }

    private void OnGridStateInit1(GridStateEventArgs<SampleModel> args)
    {
        ++OnStateInitCounter1;

        args.GridState.GroupDescriptors.Add(new GroupDescriptor
        {
            Member = nameof(SampleModel.GroupName)
        });
    }

    private void OnGridStateInit2(GridStateEventArgs<SampleModel> args)
    {
        ++OnStateInitCounter2;

        args.GridState.GroupDescriptors.Add(new GroupDescriptor
        {
            Member = nameof(SampleModel.GroupName)
        });
    }

    private void OnGridStateInit3(GridStateEventArgs<SampleModel> args)
    {
        ++OnStateInitCounter3;

        args.GridState.GroupDescriptors = new List<GroupDescriptor>();
        // OR
        args.GridState.GroupDescriptors.Clear();

        args.GridState.GroupDescriptors.Add(new GroupDescriptor
        {
            Member = nameof(SampleModel.GroupName)
        });
    }

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

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 4; i++)
        {
            GridData.Add(new SampleModel()
            {
                Id = i,
                Name = $"Name {i}",
                GroupName = $"Group {i % 2 + 1}"
            });
        }
    }

    public class SampleModel
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string GroupName { get; set; } = string.Empty;
    }
}

    .k-grid .k-grouping-header {
        padding: 0;
        border-bottom-width: 0;
        gap: 0;
    }

        .k-grid .k-grouping-header::before {
            margin: 0;
        }

    .k-grid .k-grouping-header .k-grouping-drop-container {
        margin: 0;
    }

Error: System.ArgumentNullException: Value cannot be null. (Parameter 'nullableType')

@using Telerik.DataSource
@using Telerik.DataSource.Extensions
 
<TelerikGrid TItem="@Employee"
             OnRead="@OnReadHandler"
             Pageable="true"
             FilterMode="@GridFilterMode.FilterMenu"
             FilterMenuType="@FilterMenuType.CheckBoxList"
             ShowColumnMenu="true"
             Height="400px">
    <GridColumns>
        <GridColumn Field="@(nameof(Employee.EmployeeId))" Filterable="false" />
        <GridColumn Field="@nameof(Employee.Name)">
            <FilterMenuTemplate Context="context">
                <TelerikCheckBoxListFilter Data="@NameOptions"
                                           Field="@(nameof(NameFilterOption.Name))"
                                           @bind-FilterDescriptor="@context.FilterDescriptor">
                </TelerikCheckBoxListFilter>
            </FilterMenuTemplate>
            <FilterMenuButtonsTemplate Context="filterContext">
                <TelerikButton OnClick="@( async () => await ApplyFilterAsync(filterContext) )"
                               ThemeColor="primary">Filter</TelerikButton>
                <TelerikButton OnClick="@( async () => await ClearFilterAsync(filterContext) )">Clear</TelerikButton>
            </FilterMenuButtonsTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Employee.Team)" Title="Team">
            <FilterMenuTemplate Context="context">
                <TelerikCheckBoxListFilter Data="@TeamsList"
                                           Field="@(nameof(TeamNameFilterOption.Team))"
                                           @bind-FilterDescriptor="@context.FilterDescriptor">
                </TelerikCheckBoxListFilter>
            </FilterMenuTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Employee.IsOnLeave)" Title="On Vacation" />
    </GridColumns>
</TelerikGrid>

@code {
    List<Employee> AllGridData { get; set; }

    #region custom-filter-data
    List<TeamNameFilterOption> TeamsList { get; set; }
    List<NameFilterOption> NameOptions { get; set; }

    private async Task ApplyFilterAsync(FilterMenuTemplateContext filterContext)
    {
        var hasFilters = filterContext.FilterDescriptor.FilterDescriptors.OfType<FilterDescriptor>().Any(x => !string.IsNullOrEmpty(x.Value.ToString()));

        if (hasFilters)
        {
            await filterContext.FilterAsync();
        }
        else
        {
            await filterContext.ClearFilterAsync();
        }
    }

    private async Task ClearFilterAsync(FilterMenuTemplateContext filterContext)
    {
        await filterContext.ClearFilterAsync();
    }

    //obtain filter lists data from the data source to show all options
    async Task GetTeamOptions()
    {
        if (TeamsList == null) // sample of caching since we always want all distinct options,
                               //but we don't want to make unnecessary requests
        {
            TeamsList = await GetNamesFromService();
        }
    }

    async Task<List<TeamNameFilterOption>> GetNamesFromService()
    {
        await Task.Delay(500);// simulate a real service delay

        // this is just one example of getting distinct values from the full data source
        // in a real case you'd probably call your data service here instead
        // or apply further logic (such as tie the returned data to the data the grid will have according to your business logic)
        List<TeamNameFilterOption> data = AllGridData.OrderBy(z => z.Team).Select(z => z.Team).
            Distinct().Select(t => new TeamNameFilterOption { Team = t }).ToList();

        return await Task.FromResult(data);
    }

    async Task GetNameOptions()
    {
        if (NameOptions == null)
        {
            NameOptions = await GetNameOptionsFromService();
        }
    }

    async Task<List<NameFilterOption>> GetNameOptionsFromService()
    {
        await Task.Delay(500);// simulate a real service delay

        List<NameFilterOption> data = AllGridData.OrderBy(z => z.Name).Select(z => z.Name).
            Distinct().Select(n => new NameFilterOption { Name = n }).ToList();

        return await Task.FromResult(data);
    }
    #endregion custom-filter-data

    async Task OnReadHandler(GridReadEventArgs args)
    {
        //typical data retrieval for the grid
        var filteredData = await AllGridData.ToDataSourceResultAsync(args.Request);
        args.Data = filteredData.Data as IEnumerable<Employee>;
        args.Total = filteredData.Total;
    }

    protected override async Task OnInitializedAsync()
    {
        AllGridData = new List<Employee>();
        var rand = new Random();
        for (int i = 1; i <= 15; i++)
        {
            AllGridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3,
                IsOnLeave = i % 2 == 0
            });
        }

        await GetTeamOptions();
        await GetNameOptions();
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public bool IsOnLeave { get; set; }
    }

    // in this sample we use simplified models to fetch less data from the service
    // instead of using the full Employee model that has many fields we do not need for the filters

    public class TeamNameFilterOption
    {
        public string Team { get; set; }
    }

    public class NameFilterOption
    {
        public string Name { get; set; }
    }
}