@using Telerik.Blazor.Components.Grid

@inject IJSRuntime JS

<PageTitle>Home</PageTitle>

<TelerikGrid Data="@GridData">
    <GridToolBarTemplate>
        <TelerikButton OnClick="@ExportGridWithOtherColumns">Export Programmatically</TelerikButton>
        <GridCommandButton Class="hidden-export-button" Command="ExcelExport">Export Natively</GridCommandButton>
    </GridToolBarTemplate>
    <GridSettings>
        <GridExcelExport OnBeforeExport="@OnGridBeforeExport" />
    </GridSettings>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Id)" Width="100px" />
        <GridColumn Field="@nameof(Product.Name)" Width="120px" />
        <GridColumn Title="Product Details">
            <Columns>
                <GridColumn Field="@nameof(Product.Group)" Width="180px" />
                <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:c2}" Width="120px" />
                <GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:n0}" Width="120px" />
                <GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:d}" Width="180px" />
                <GridColumn Field="@nameof(Product.Discontinued)" Width="100px" />
            </Columns>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

<style>
    .hidden-export-button {
        display: none;
    }
</style>

<script suppress-error="BL9992">
    function clickExportCommandButton() {
        let hiddenExportButton = document.querySelector(".hidden-export-button");
        if (hiddenExportButton) {
            hiddenExportButton.click();
        }
    }
</script>

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

    private void OnGridBeforeExport(GridBeforeExcelExportEventArgs args)
    {
        List<string> exportableColumnFields = new List<string> { nameof(Product.Name), nameof(Product.Price), nameof(Product.Quantity) };
        List<GridExcelExportColumn> ColumnsToExport = new();

        foreach (GridExcelExportColumn column in args.Columns)
        {
            if (exportableColumnFields.Contains(column.Field))
            {
                ColumnsToExport.Add(column);
            }
        }

        args.Columns = ColumnsToExport;
    }

    private async Task ExportGridWithOtherColumns()
    {
        await JS.InvokeVoidAsync("clickExportCommandButton");
    }

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

        for (int i = 1; i <= 7; i++)
        {
            GridData.Add(new Product()
            {
                Id = i,
                Name = $"Name {i} {(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)}",
                Group = $"Group {i % 3 + 1}",
                Price = rnd.Next(1, 100) * 1.23m,
                Quantity = rnd.Next(0, 10000),
                Released = DateTime.Today.AddDays(-rnd.Next(60, 1000)),
                Discontinued = i % 4 == 0
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Group { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public int Quantity { get; set; }
        public DateTime Released { get; set; }
        public bool Discontinued { get; set; }
    }
}