New to Telerik UI for ASP.NET CoreStart a free 30-day trial

Scrolling to a Specific Item

In many scenarios where the Grid handles large datasets, it may be necessary to automatically scroll to a specific row (data item) based on external JavaScript logic or user input.

The Grid component supports the client-side scrollToItem() method that allows you to programmatically scroll to a specific row.

The scrollToItem() method requires the following:

  • Specify the unique Model identifier to the Id() option of the Model() configuration of the DataSource.
  • Ensure the target data item appears in the current Grid data items. If the Grid is pageable, the item must be available on the current page.
Razor
    @(Html.Kendo().Grid<OrderViewModel>()
        .Name("grid")
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(p => p.OrderID))
            .Read(read => read.Action("Orders_Read", "Grid"))
        )
        ... // Additional configuration.
    )

Scrolling to an Item by Passing the Id of the Item

To scroll the Grid programmatically to a specific data item, pass the Id of the item to the scrollToItem() method.

The following example shows how to scroll to the last row of the Grid when a button is clicked.

Razor
    @(Html.Kendo().Button()
        .Name("btn")
        .Content("Scroll to last item")
        .Events(ev => ev.Click("onBtnClick"))
    )

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()    
        .Name("grid")
        .Columns(columns => {
            columns.Bound(p => p.OrderID);
            columns.Bound(p => p.ShipName);
            columns.Bound(p => p.ShipCity);
        })
        .Scrollable()
        .Height(400)
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(p => p.OrderID))
            .Read(read => read.Action("Orders_Read", "Grid"))
        )
    )

Scrolling to an Item in Virtual Scrolling Grid

When the Grid is set up in virtual scrolling mode, you can scroll to an item that is not loaded yet using the callback parameter of the scrollToItem() method.

The callback is a function that executes when virtual scrolling is enabled. It returns the index of the target item in the dataset.

The following example shows how to scroll to an item that is not loaded yet when a button is clicked. The item's OrderID is equal to 10403 and it comes from ViewData.

Razor
    @{
        var initialItemId = ViewData["initialItemId"];
    }

    @(Html.Kendo().Button()
        .Name("btn")
        .Content("Scroll to item")
        .Events(ev => ev.Click("onBtnClick"))
    )

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()    
        .Name("grid")
        .Columns(columns => {
            columns.Bound(p => p.OrderID);
            columns.Bound(p => p.ShipName);
            columns.Bound(p => p.ShipCity);
        })
        .Scrollable(scrollable => scrollable.Virtual(true))
        .Height(400)
        .Pageable(p =>
            p.Info(true)
            .Numeric(false)
            .PreviousNext(false)
            .Messages(m=>m.Display("Showing {2} data items"))
        )
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(50)
            .Model(model => model.Id(p => p.OrderID))
            .Read(read => read.Action("Orders_Read", "Grid"))
        )
    )

Known Limitations

  • Scrolling to an item in a Grid with enabled group paging functionality is not supported.
  • Scrolling to an item in a Gird that uses endless scrolling mode is not supported.
  • When the sum of the specified row's height and the height of all rows afterward is less than the Grid's height, the row that must be scrolled to the top will not appear at the top. In non-virtualized Grids, the Grid will be scrolled to its bottom, but the specified row will not appear at the top. In Grids with enabled virtual scrolling, the Grid will be scrolled to the bottom of the current data set, but the scroller will not be positioned at the bottom, and the row will not be positioned at the top.

See Also