@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             Groupable="true"
             OnStateInit="@( (GridStateEventArgs<Employee> args) => OnGridStateInit(args) )">
    <GridColumns>
        <GridColumn Field="@nameof(Employee.Name)" />
        <GridColumn Field="@nameof(Employee.Team)">
            <GroupHeaderTemplate>
                <div class="group-header-expand"
                     @onclick="@( () => ToggleGridGroup(context.Value) )">
                    Team: @context.Value
                </div>
            </GroupHeaderTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Employee.Salary)" />
        <GridColumn Field="@nameof(Employee.OnVacation)" />
    </GridColumns>
</TelerikGrid>

<style>
    .group-header-expand {
        flex-grow: 1;
        cursor: pointer;
    }
</style>

@code {
    List<Employee> GridData { get; set; }
    TelerikGrid<Employee> GridRef { get; set; }

    async Task ToggleGridGroup(object groupValue)
    {
        var gridState = GridRef.GetState();

        var dataState = new DataSourceRequest()
        {
            Filters = (IList<IFilterDescriptor>)gridState.FilterDescriptors,
            Groups = (IList<GroupDescriptor>)gridState.GroupDescriptors,
            Page = gridState.Page.Value,
            PageSize = 10,
            Sorts = (IList<SortDescriptor>)gridState.SortDescriptors
        };

        var groups = (List<AggregateFunctionsGroup>)GridData.ToDataSourceResult(dataState).Data;

        var groupRowIndex = groups.FindIndex(x => x.Key == groupValue);

        if (gridState.CollapsedGroups.IndexOf(groupRowIndex) >= 0)
        {
            gridState.CollapsedGroups.Remove(groupRowIndex);
        }
        else
        {
            gridState.CollapsedGroups.Add(groupRowIndex);
        }

        await GridRef.SetState(gridState);
    }

    async Task OnGridStateInit(GridStateEventArgs<Employee> args)
    {
        args.GridState.GroupDescriptors.Add(new GroupDescriptor()
        {
            Member = nameof(Employee.Team),
            MemberType = typeof(string)
        });
    }

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        var rnd = new Random();

        for (int i = 1; i <= 7; i++)
        {
            GridData.Add(new Employee()
            {
                Id = i,
                Name = "Name " + i,
                Team = "Team " + (i % 4 + 1),
                Salary = (decimal)rnd.Next(1000, 3000),
                OnVacation = i % 3 == 0
            });
        }
    }

    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public decimal Salary { get; set; }
        public bool OnVacation { get; set; }
    }
}