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:
- Handle the
Changeevent of the Grid. - Use the
select()method to get the selected table row. - Get the data item of the selected row by using the
dataItem()method. - Use the private
_selectedIdsobject 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.