@using Telerik.DataSource

<p>Group by a third column, so that it should come last in the Group Panel:</p>

<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             Pageable="true"
             Sortable="true"
             Groupable="true"
             FilterMode="GridFilterMode.FilterRow"
             OnStateInit="@( (GridStateEventArgs<Employee> args) => OnGridStateInit(args) )"
             OnStateChanged="@( (GridStateEventArgs<Employee> args) => OnGridStateChanged(args) )">
    <GridColumns>
        <GridColumn Field="@nameof(Employee.Name)" />
        <GridColumn Field="@nameof(Employee.Team)" />
        <GridColumn Field="@nameof(Employee.Salary)" />
        <GridColumn Field="@nameof(Employee.OnVacation)" />
    </GridColumns>
</TelerikGrid>

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

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

    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)
        });

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

    private async Task OnGridStateChanged(GridStateEventArgs<Employee> args)
    {
        if (args.PropertyName == "GroupDescriptors" && args.GridState.GroupDescriptors.Count > 2 && GridRef != null)
        {
            var secondGroupDescriptor = args.GridState.GroupDescriptors.ElementAt(1);

            args.GridState.GroupDescriptors.Remove(secondGroupDescriptor);
            args.GridState.GroupDescriptors.Add(secondGroupDescriptor);

            await GridRef.SetStateAsync(args.GridState);
        }
    }

    protected override void OnInitialized()
    {
        var rnd = new Random();

        for (int i = 1; i <= 20; 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; } = string.Empty;
        public string Team { get; set; } = string.Empty;
        public decimal Salary { get; set; }
        public bool OnVacation { get; set; }
    }
}

Error: System.OverflowException: Value was either too large or too small for a Decimal.

.k-grid-add-row .k-hierarchy-cell .k-icon {
    display: none;
}

@using System.ComponentModel.DataAnnotations

@inject IJSRuntime js

<label><TelerikCheckBox @bind-Value="@EnableScrollWorkaround" /> Enable Workaround</label>

<TelerikGrid Data="@GridData"
             EditMode="@GridEditMode.Inline"
             OnAdd="@OnGridAdd"
             OnUpdate="@OnGridUpdate"
             OnCreate="@OnGridCreate"
             Width="700px"
             Height="400px"
             Class="grid-class">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add">Add Item</GridCommandButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" Width="200px" Locked="true" />
        <GridColumn Field="@nameof(Product.Price)" Width="200px" />
        <GridColumn Field="@nameof(Product.Quantity)" Width="200px" />
        <GridCommandColumn Width="200px" Locked="true">
            <GridCommandButton Command="Edit">Edit</GridCommandButton>
            <GridCommandButton Command="Save" ShowInEdit="true">Save</GridCommandButton>
            <GridCommandButton Command="Cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

<script suppress-error="BL9992">

    function scrollGridToTop() {
        var gridContentArea = document.querySelector(".grid-class .k-grid-content");
        if (gridContentArea) {
            gridContentArea.scrollTop = 0;
        }
    }

</script>

@code {
    private bool EnableScrollWorkaround { get; set; } = true;

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

    private int LastId { get; set; }

    private async Task OnGridAdd(GridCommandEventArgs args)
    {
        if (EnableScrollWorkaround)
        {
            await js.InvokeVoidAsync("scrollGridToTop");
        }
    }

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

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

    private void OnGridCreate(GridCommandEventArgs args)
    {
        var createdItem = (Product)args.Item;

        createdItem.Id = ++LastId;

        GridData.Insert(0, createdItem);
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 30; i++)
        {
            GridData.Add(new Product()
            {
                Id = ++LastId,
                Name = $"Product {LastId}",
                Quantity = (short)Random.Shared.Next(0, 1000),
                StartDate = DateTime.Now.AddDays(-Random.Shared.Next(60, 1000)),
                IsActive = LastId % 4 > 0
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        [Required]
        public string Name { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public int Quantity { get; set; }
        public DateTime StartDate { get; set; }
        public bool IsActive { get; set; }
    }
}

    .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;
    }