@* Use the Template to render the list of columns and add some custom styles *@ 

<TelerikGrid Data="@MyData"
             Pageable="true"
             PageSize="5"
             Width="700px"
             FilterMode="@GridFilterMode.FilterMenu"
             Sortable="true"
             ShowColumnMenu="true">
     <GridSettings>
     
     <GridColumnMenuSettings Sortable="true"
                             Lockable="false"
                             FilterMode="@ColumnMenuFilterMode.None" />
 </GridSettings>
    <GridColumns> 

 <GridCheckboxColumn Width="80px" HeaderClass="header-select-all" />   
        <GridColumn Field="@(nameof(SampleData.Id))" Width="80px" Title="Id" Id="id-column-id" />
        <GridColumn Field="@(nameof(SampleData.FirstName))" Title="First Name" Id="firstname-column-id" />
        <GridColumn Field="@(nameof(SampleData.LastName))" Title="Last Name" Id="lastname-column-id" />
        <GridColumn Field="@(nameof(SampleData.CompanyName))" Title="Company" Id="companyname-column-id" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" Id="team-column-id" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" Id="hiredate-column-id" />
    </GridColumns>
</TelerikGrid>

@code {
    public string TextboxValue { get; set; } = string.Empty;

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
    {
        Id = x,
        FirstName = $"FirstName {x}",
        LastName = $"LastName {x}",
        CompanyName = $"Company {x}",
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date
    });

    public class SampleData
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string CompanyName { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

@using Telerik.DataSource

<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             TItem="@Employee"
             Pageable="true"
             Sortable="true"
             Groupable="true"
             FilterMode="GridFilterMode.FilterRow"
             OnStateInit="@OnGridStateInit"
             OnStateChanged="@OnGridStateChanged"
             EditMode="@GridEditMode.Inline"
             OnUpdate="@OnGridUpdate">
    <GridColumns>
        <GridColumn Field="@nameof(Employee.Name)" />
        <GridColumn Field="@nameof(Employee.Team)" />
        <GridColumn Field="@nameof(Employee.Salary)" />
        <GridColumn Field="@nameof(Employee.OnVacation)" />
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

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

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

    private ICollection<int>? GridCollapsedGroups { get; set; }

    private void OnGridUpdate(GridCommandEventArgs args)
    {
        var updatedItem = (Employee)args.Item;
        var originalItemIndex = GridData.FindIndex(x => x.Id == updatedItem.Id);

        if (originalItemIndex >= 0)
        {
            GridData[originalItemIndex] = updatedItem;
        }

        GridCollapsedGroups = GridRef!.GetState().CollapsedGroups;
    }

    private async Task OnGridStateChanged(GridStateEventArgs<Employee> args)
    {
        if (args.PropertyName == "EditItem" && GridCollapsedGroups != null)
        {
            args.GridState.CollapsedGroups = GridCollapsedGroups;

            await GridRef!.SetStateAsync(args.GridState);

            GridCollapsedGroups = default;
        }
    }

    private void OnGridStateInit(GridStateEventArgs<Employee> args)
    {
        args.GridState.GroupDescriptors = new List<GroupDescriptor>();

        args.GridState.GroupDescriptors.Add(new GroupDescriptor()
        {
            Member = nameof(Employee.Team),
            MemberType = typeof(string)
        });
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 20; i++)
        {
            GridData.Add(new Employee()
            {
                Id = i,
                Name = $"Name {i}",
                Team = $"Team {i % 4 + 1}",
                Salary = (decimal)Random.Shared.Next(1000, 3000),
                OnVacation = i % 3 == 0
            });
        }
    }

    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Team { get; set; } = string.Empty;
        public decimal Salary { get; set; }
        public bool OnVacation { 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;
    }
}