@inject IJSRuntime js

@implements IDisposable

<div style="position:relative;height:300px">
    @if (RecreatingGrid)
    {
        <TelerikLoaderContainer />
    }
    else
    {
        <TelerikGrid Data="@GridData"
                     TItem="@Product"
                     Pageable="true"
                     Sortable="true"
                     FilterMode="GridFilterMode.FilterRow"
                     Height="100%">
            <GridColumns>
                <GridColumn Field="@nameof(Product.Name)" Title="Product Name" />
                <GridColumn Field="@nameof(Product.Price)" />
                <GridColumn Field="@nameof(Product.Stock)" />
                <GridColumn Field="@nameof(Product.ReleaseDate)" Title="Release Date" />
                <GridColumn Field="@nameof(Product.InProduction)" />
            </GridColumns>
        </TelerikGrid>
    }
</div>

<script suppress-error="BL9992">
    var dotNet;
    var zoomLevel = (window.outerWidth / window.innerWidth) * 100;

    function attachZoom(dotNetReference) {
        dotNet = dotNetReference;
        window.addEventListener("resize", onResize);
    }

    function onResize(e) {
        var newZoomLevel = (window.outerWidth / window.innerWidth) * 100;
        if (newZoomLevel != zoomLevel) {
            zoomLevel = newZoomLevel;
            dotNet.invokeMethodAsync("RecreateGrid");
        }
    }
</script>

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

    private DotNetObjectReference<Index>? DotNetRef;

    private bool RecreatingGrid { get; set; }

    [JSInvokable("RecreateGrid")]
    public async Task RecreateGrid()
    {
        RecreatingGrid = true;
        StateHasChanged();
        await Task.Delay(300);
        RecreatingGrid = false;
        StateHasChanged();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await js.InvokeVoidAsync("attachZoom", DotNetRef);
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    protected override void OnInitialized()
    {
        DotNetRef = DotNetObjectReference.Create(this);

        var rnd = new Random();

        for (int i = 1; i <= 7; i++)
        {
            GridData.Add(new Product()
            {
                Id = i,
                Name = $"Product {i}",
                Price = (decimal)rnd.Next(1, 100),
                Stock = rnd.Next(0, 50),
                ReleaseDate = DateTime.Now.AddDays(-rnd.Next(60, 1000)),
                InProduction = i % 3 == 0
            });
        }
    }

    public void Dispose()
    {
        DotNetRef?.Dispose();
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public int Stock { get; set; }
        public DateTime ReleaseDate { get; set; }
        public bool InProduction { get; set; }
    }
}