<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             EditMode="@GridEditMode.Incell"
             Navigable="true"
             ScrollMode="@GridScrollMode.Virtual"
             RowHeight="42"
             Height="400px"
             OnUpdate="@OnGridUpdate"
             OnCreate="@OnGridCreate"
             OnStateChanged="@( (GridStateEventArgs<Product> args) => GridSkip = args.GridState.Skip )"
             OnEdit="@OnGridEdit">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add" Icon="@FontIcon.Plus">Add Item</GridCommandButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" Title="Product Name" />
        <GridColumn Field="@nameof(Product.Price)" Title="Unit Price" />
        <GridColumn Field="@nameof(Product.Stock)" Title="Units In Stock" />
        <GridColumn Field="@nameof(Product.ReleaseDate)" Title="Release Date" />
        <GridColumn Field="@nameof(Product.Discontinued)" Title="Discontinued" />
    </GridColumns>
</TelerikGrid>

@code {
    TelerikGrid<Product> GridRef { get; set; }

    List<Product> GridData { get; set; }

    int? GridSkip { get; set; } = 0;

    int VisibleRowsInGrid = 6;

    private async Task OnGridEdit(GridCommandEventArgs args)
    {
        var originalEditItem = (Product)args.Item;
        var itemIndex = GridData.FindIndex(x => x.Id == originalEditItem.Id);
        if (itemIndex >= GridSkip + VisibleRowsInGrid)
        {
            var gridState = GridRef.GetState();
            gridState.Skip += 1;
            gridState.OriginalEditItem = originalEditItem;
            gridState.EditItem = originalEditItem.Clone();

            await GridRef.SetStateAsync(gridState);
        }
    }

    private void OnGridUpdate(GridCommandEventArgs args)
    {
        var argsItem = args.Item as Product;
        var index = GridData.FindIndex(i => i.Id == argsItem.Id);
        if (index != -1)
        {
            GridData[index] = argsItem;
        }
    }

    private void OnGridCreate(GridCommandEventArgs args)
    {
        var argsItem = args.Item as Product;

        argsItem.Id = GridData.Count + 1;

        GridData.Insert(0, argsItem);
    }

    private void OnGridDelete(GridCommandEventArgs args)
    {
        var argsItem = args.Item as Product;

        GridData.Remove(argsItem);
    }

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

        var rnd = new Random();

        for (int i = 1; i <= 500; i++)
        {
            GridData.Add(new Product()
            {
                Id = i,
                Name = $"Product {i}",
                Price = (decimal)(rnd.Next(1, 100) * 3.14),
                Stock = (short)rnd.Next(0, 1000),
                ReleaseDate = DateTime.Now.AddMonths(-rnd.Next(0, 120)).AddDays(rnd.Next(1, 30)),
                Discontinued = Convert.ToBoolean(rnd.Next(0, 2))
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal? Price { get; set; }
        public short? Stock { get; set; }
        public DateTime? ReleaseDate { get; set; }
        public bool Discontinued { get; set; }

        public Product Clone()
        {
            return new Product()
            {
                Discontinued = Discontinued,
                Id = Id,
                Name = Name,
                Price = Price,
                ReleaseDate = ReleaseDate,
                Stock = Stock
            };
        }
    }
}