@using Telerik.DataSource
@using Telerik.DataSource.Extensions
@inject IJSRuntime js

<p>
    <label for="rowID">Row ID (1 - @AllData.Count.ToString()):</label>
    <TelerikNumericTextBox Id="rowID"@bind-Value="@IDToSelect" Min="1" Max="@AllData.Count" Width="100px" />
    <TelerikButton OnClick="@SelectRow">Select and Scroll to Row</TelerikButton>
</p>

<TelerikGrid @ref="@SelectableGrid"
             OnRead="@GridOnRead"
             Pageable="true"
             PageSize="@GridPageSize"@bind-Page="@GridPage"
             Height="420px"
             Sortable="true"
             FilterMode="GridFilterMode.FilterRow"
             SelectionMode="GridSelectionMode.Single"@bind-SelectedItems="@SelectedItems">
    <GridColumns>
        <GridCheckboxColumn SelectAll="true" Width="42px" />
        <GridColumn Field=@nameof(Product.Name) Title="Product Name" />
        <GridColumn Field=@nameof(Product.Price) Title="Price" />
        <GridColumn Field=@nameof(Product.Quantity) Title="Units In Stock" />
    </GridColumns>
</TelerikGrid>

<script suppress-error="BL9992">function scrollToRow() {
        var row = document.querySelector("tr.k-state-selected");
        if (row) {
            row.scrollIntoView();
        }
    }</script>

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

    TelerikGrid<Product> SelectableGrid { get; set; }
    DataSourceRequest GridDataRequest { get; set; }

    int GridPageSize { get; set; } = 30;
    int GridPage { get; set; } = 1;

    IEnumerable<Product> SelectedItems { get; set; } = new List<Product>();
    int IDToSelect { get; set; } = 50;
    bool ShouldScrollToRow { get; set; } = false;

    async Task SelectRow()
    {
        GridDataRequest.Page = 1;
        GridDataRequest.PageSize = AllData.Count;
        GridDataRequest.Skip = 0;

        var gridDataNoPaging = (AllData.ToDataSourceResult(GridDataRequest).Data as IEnumerable<Product>).ToList();
        int rowIndex = gridDataNoPaging.FindIndex(item => item.ID == IDToSelect);
        var newPage = rowIndex / GridPageSize + 1;

        if (newPage != GridPage)
        {
            var gridState = SelectableGrid.GetState();
            gridState.Page = newPage;
            await SelectableGrid.SetState(gridState);
        }

        ShouldScrollToRow = true;
        SelectedItems = new List<Product>() { AllData.Where(item => item.ID == IDToSelect).FirstOrDefault() };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (ShouldScrollToRow)
        {
            await Task.Delay(1);

            ShouldScrollToRow = false;
            await js.InvokeVoidAsync("scrollToRow");
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    async Task GridOnRead(GridReadEventArgs args)
    {
        GridDataRequest = args.Request;
        var result = AllData.ToDataSourceResult(args.Request);
        args.Data = (result.Data as IEnumerable<Product>).ToList();
        args.Total = result.Total;
    }

    protected override void OnInitialized()
    {
        AllData = new List<Product>();
        var rnd = new Random();

        for (int i = 1; i <= 120; i++)
        {

            AllData.Add(new Product()
            {
                ID = i,
                Name = "Product " + i.ToString(),
                Price = (decimal)rnd.Next(1, 100),
                Quantity = (short)rnd.Next(1, 100)
            });
        }
    }

    publicclass Product
    {
        public int ID { get; set; }
        publicstring Name { get; set; }
        public decimal Price { get; set; }
        public short Quantity { get; set; }
    }
}