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

<TelerikButton OnClick="@CurrentPage">Current Page</TelerikButton>
<TelerikButton OnClick="@AllPages">All Pages</TelerikButton>

<TelerikGrid Data="@GridData"
             @ref="@GridRef"
             Pageable="true"
             Sortable="true"
             Resizable="true"
             Reorderable="true"
             FilterMode="@GridFilterMode.FilterRow"
             Groupable="true">



    <GridExport>
        <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
    </GridExport>

    <GridColumns>
        <GridColumn Field="@nameof(SampleData.ProductId)" Title="ID" Width="100px" />
        <GridColumn Field="@nameof(SampleData.ProductName)" Title="Product Name" Width="300px" />
        <GridColumn Field="@nameof(SampleData.UnitsInStock)" Title="In stock" Width="100px" />
        <GridColumn Field="@nameof(SampleData.Price)" Title="Unit Price" Width="200px" />
        <GridColumn Field="@nameof(SampleData.Discontinued)" Title="Discontinued" Width="100px" />
        <GridColumn Field="@nameof(SampleData.FirstReleaseDate)" Title="Release Date" Width="300px" />
    </GridColumns>
</TelerikGrid>

@code {
    async Task AllPages()
    {
        ExportAllPages = true;

        await Task.Delay(20); // allow the component to rerender with the new parameter

        await GridRef.SaveAsCsvFileAsync();

        //await GridRef.SaveAsExcelFileAsync(); // this works
    }

    async Task CurrentPage()
    {
        ExportAllPages = false;

        await Task.Delay(20); // allow the component to rerender with the new parameter

        await GridRef.SaveAsCsvFileAsync();

        //await GridRef.SaveAsExcelFileAsync(); // this works
    }


    private TelerikGrid<SampleData> GridRef { get; set; }


    List<SampleData> GridData { get; set; }
    bool ExportAllPages { get; set; }

    protected override void OnInitialized()
    {
        GridData = Enumerable.Range(1, 100).Select(x => new SampleData
        {
            ProductId = x,
            ProductName = $"Product {x}",
            UnitsInStock = x * 2,
            Price = 3.14159m * x,
            Discontinued = x % 4 == 0,
            FirstReleaseDate = DateTime.Now.AddDays(-x)
        }).ToList();
    }

    public class SampleData
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public int UnitsInStock { get; set; }
        public decimal Price { get; set; }
        public bool Discontinued { get; set; }
        public DateTime FirstReleaseDate { get; set; }
    }
}