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

<p><TelerikButton OnClick="@ToggleSecondGrid">Toggle Second Grid</TelerikButton></p>

<TelerikGrid Data="@GridData">
    <GridToolBar>
        <GridSearchBox />
    </GridToolBar>
    <GridColumns>
        <GridColumn Field=@nameof(Product.ProductName) Title="Product Name" />
    </GridColumns>
</TelerikGrid>

@if (ShowSecondGrid)
{
    <TelerikGrid Data="@( new List<Product>() )">
        <GridColumns>
            <GridColumn />
        </GridColumns>
    </TelerikGrid>
}

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

    bool ShowSecondGrid { get; set; }

    async Task ToggleSecondGrid()
    {
        ShowSecondGrid = !ShowSecondGrid;
    }

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

        for (int i = 1; i <= 5; i++)
        {
            GridData.Add(new Product()
            {
                ProductId = i,
                ProductName = "Product " + i.ToString(),
                UnitPrice = (decimal)(i * 3.14),
                UnitsInStock = (short)(i * 1),
                Discontinued = false
            });
        }
    }

    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal? UnitPrice { get; set; }
        public short? UnitsInStock { get; set; }
        public bool Discontinued { get; set; }
    }
}