New to Telerik UI for ASP.NET MVC? 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 MVC

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>

For a runnable example based on the code above, refer to this REPL.

More ASP.NET MVC Grid Resources

See Also

In this article