@using Telerik.DataSource

<TelerikGrid Data=@GridData @ref="TheGrid"
             Groupable="true"
             OnStateInit="@((GridStateEventArgs<User> args) => OnStateInitHandler(args))">
    <GridColumns>
        <GridColumn Title="Personal Information">
            <Columns>
                <GridColumn Field=@nameof(User.LName) Title="Last Name" />
                <GridColumn Field=@nameof(User.FName) Title="First Name" />
            </Columns>
        </GridColumn>
        <GridColumn Title="Status and Last Login">
            <Columns>
                <GridColumn Field=@nameof(User.StatusName) Title="StatusName" />
                <GridColumn Field=@nameof(User.LastLoginDate) Title="Last Login" DisplayFormat="{0:yyyy-MMM-dd}" />
            </Columns>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    TelerikGrid<User> TheGrid { get; set; }
    List<User> GridData { get; set; }

    protected override void OnInitialized()
    {
        var data = new List<User>();
        for (int i = 1; i <= 20; i++)
        {
            data.Add(new User()
            {
                Id = i,
                FName = "First Name " + i,
                LName = "Last Name " + i,
                StatusId = i * 123,
                LastLoginDate = DateTime.Now,
                StatusName = "Status Name " + (i % 5 + 1)
            });
        }
        GridData = data;
    }

    private void OnStateInitHandler(GridStateEventArgs<User> args)
    {
        GridState<User> desiredState = new GridState<User>()
        {
            GroupDescriptors = new List<GroupDescriptor>()
            {
                new GroupDescriptor()
                {
                    Member = nameof(User.StatusName),
                    MemberType = typeof(string)
                }
            }
        };

        // will trigger an exception if grouping by a nested column
        args.GridState = desiredState;
    }

    @*protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var desiredState = TheGrid.GetState();

            desiredState.GroupDescriptors = new List<GroupDescriptor>()
            {
                new GroupDescriptor()
                {
                    Member = nameof(User.StatusName),
                    MemberType = typeof(string)
                }
            };

            await TheGrid.SetState(desiredState);
        }

        await base.OnAfterRenderAsync(firstRender);
    }*@

    public class User
    {
        public long Id { get; set; }

        public int StatusId { get; set; }
        public string StatusName { get; set; }

        public string FName { get; set; }
        public string LName { get; set; }

        public DateTime LastLoginDate { get; set; }
    }
}