@using System.Dynamic

<TelerikGrid Data="@Data" 
             Pageable="true" Sortable="true" Groupable="true"
             FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
             EditMode="@GridEditMode.Incell"
             Resizable="true" Reorderable="true">
        <GridColumns>
            <GridColumn Field="Id" FieldType="typeof(string)" Width="120px" />
            <GridColumn Field="DetailData.PropertyInt" Title="Column A" FieldType="@typeof(int)"  />
            <GridColumn Field="DetailData.ProptertyString" Title="Column B" FieldType="@typeof(string)"/>
            <GridColumn Field="DetailData.PropertyDate" Title="Column C" FieldType="@typeof(DateTime)"/>
        </GridColumns>
</TelerikGrid>


@code {
    public ExpandoObject[] Data { get; set; } = Array.Empty<ExpandoObject>();

    protected override async Task OnInitializedAsync()
    {
        Data = new ExpandoObject[]
            {
            GetPopulatedExpando(1),
            GetPopulatedExpando(2),
            GetPopulatedExpando(3),
            GetPopulatedExpando(4),
            GetPopulatedExpando(5),
            };
    }

    private ExpandoObject GetPopulatedExpando(int id)
    {
        dynamic expando = new ExpandoObject();
        expando.Id = id;
        dynamic nested = new ExpandoObject();
        nested.PropertyInt = id;
        nested.ProptertyString = "ID " + id;
        nested.PropertyDate = new DateTime(2022, 4, id);
        expando.DetailData = nested;

        return expando;
    }
}

<GridColumn Field="@nameof(SalesOrderLineItem.Quantity)">
    <HeaderTemplate>
        <span title="Order Quantity">Order Quantity</span>
    </HeaderTemplate>
</GridColumn>

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

public enum ShortEnum : short
{
    Value1,
    Value2,
    Value3
}

<TelerikGrid FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
             Data="@GridData"
             Resizable="true">
    <DetailTemplate>
        detail template
    </DetailTemplate>
    <GridColumns>
        <GridColumn Field="Id" />
        <GridColumn Field="Id" Title="Resize Me First" />
        <GridColumn Field="Id" Title="Resize Me First" />
    </GridColumns>
</TelerikGrid>

@code {
    List<GridModel> GridData { get; set; }

    protected override void OnInitialized()
    {
        List<GridModel> data = new List<GridModel>();

        for (int i = 1; i <= 3; i++)
        {
            data.Add(new GridModel { Id = i });
        }

        GridData = data;
    }

    public class GridModel
    {
        public int Id { get; set; }
    }
}

GET serviceRoot/People?$filter=Emails/any(s:endswith(s, 'contoso.com'))

<TelerikGrid Data="@GridData" EditMode="@GridEditMode.Incell" Navigable="true"
             OnEdit="@EditItem" OnUpdate="@UpdateItem">
    <GridColumns>
        <GridColumn Field="@nameof(GridModel.Foo)" Title="Foo (bug)" />
        <GridColumn Field="@nameof(GridModel.Bar)" Title="Bar (workaround)">
            @*<EditorTemplate>
                @{
                    var item = context as GridModel;
                    // workaround 1
                    if (item.IsEditable)
                    {
                        <TelerikTextBox @bind-Value="@item.Bar" />
                    }
                    else
                    {
                        <span class="k-textbox k-input k-rounded-md">
                            <input class="k-input-inner" tabindex="0" readonly value="@item.Bar" />
                        </span>
                    }
                }
            </EditorTemplate>*@
        </GridColumn>
        <GridColumn Field="@nameof(GridModel.IsEditable)" Title="Is Row Editable?" Editable="false" />
    </GridColumns>
</TelerikGrid>

@code {
    List<GridModel> GridData { get; set; }

    void EditItem(GridCommandEventArgs args)
    {
        GridModel item = args.Item as GridModel;
        if (!item.IsEditable)
        {
            args.IsCancelled = true;
        }
    }

    void UpdateItem(GridCommandEventArgs args)
    {
        var argsItem = args.Item as GridModel;
        var index = GridData.FindIndex(i => i.Id == argsItem.Id);
        // workaround 2
        //if (index != -1 && argsItem.IsEditable)
        //{
            GridData[index] = argsItem;
        //}
    }

    protected override void OnInitialized()
    {
        GridData = new List<GridModel>();

        for (int i = 1; i <= 5; i++)
        {
            GridData.Add(new GridModel()
            {
                Id = i,
                Foo = "Foo " + i.ToString(),
                Bar = "Bar " + i.ToString(),
                IsEditable = i % 2 == 0
            });
        }
    }

    public class GridModel
    {
        public int Id { get; set; }
        public string Foo { get; set; }
        public string Bar { get; set; }
        public bool IsEditable { get; set; }
    }
}