New to Telerik UI for ASP.NET Core? Download free 30-day trial

Persist Single-Row Selection on Virtual Scrolling in Grid

Environment

Product Version 2022.2.621
Product Grid for Progress® Telerik® UI for ASP.NET Core

Description

How can I persist the selected row in the Grid when the virtual scrolling functionality is enabled?

Solution

The example below is implemented as per the following steps:

  1. Handle the Change event of the Grid.
  2. Use the select() method to get the selected table row.
  3. Get the data item of the selected row by using the dataItem() method.
  4. Use the private _selectedIds object of the Grid to save the selected row.
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()    
        .Name("grid")
        .Columns(columns => {
            columns.Bound(p => p.OrderID).Filterable(false).Width(100);
            columns.Bound(p => p.Freight).Width(100);
            columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(140);
            columns.Bound(p => p.ShipName).Width(100);
            columns.Bound(p => p.ShipCity).Width(150);
        })
        .Events(ev => ev.Change("onChange"))
        .Pageable(p =>
            p.Info(true)
            .Numeric(false)
            .PreviousNext(false)
            .Messages(m=>m.Display("Showing {2} data items"))
        )
        .Scrollable(scrollable => scrollable.Virtual(true))
        .Selectable()
        .PersistSelection(true)
        .HtmlAttributes(new { style = "height:543px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(100)
            .Model(m =>
            {
                m.Id(p => p.OrderID);
            })
            .Read(read => read.Action("Orders_Read", "Grid"))
        )
    )
    <script>
        function onChange(e) {
            var selectedRows = this.select();
            var dataItem = this.dataItem(selectedRows[0]);
            e.sender._selectedIds= {};
            e.sender._selectedIds[ dataItem.OrderID ]= true;
        }
    </script>

Refer to this REPL for a runnable example.

See Also

In this article