Navigate Virtual Scrolling in Grid with Up and Down Arrows

Environment

Product Version	2018.1 221
Product	Progress® Kendo UI® Grid for jQuery

Description

How can I navigate the virtual scrolling of the Kendo UI Grid with the Up and Down keyboard arrows?

Solution

1. In the dataBound event handler, add tabindex to the child div of the .k-scrollbar-vertical container.
2. Handle the click event of the table of the Grid.
3. In the click event handler, focus the child div of the .k-scrollbar-vertical container.

<style>
	.k-scrollbar-vertical div {
		outline: none;
	}
</style>

<div id="example">
	<div id="grid"></div>
	<script>
		$(document).ready(function() {
			$("#grid").kendoGrid({
				dataSource: {
					type: "odata-v4",
					serverPaging: true,
					serverSorting: true,
					pageSize: 100,
					transport: {
						read: "https://demos.telerik.com/service/v2/odata/Orders"
					}
				},
				height: 543,
				scrollable: {
					virtual: true
				},
				sortable: true,
				columns: [{
						field: "OrderID",
						title: "Order ID",
						width: 110
					},
					{
						field: "CustomerID",
						title: "Customer ID",
						width: 130
					},
					{
						field: "ShipName",
						title: "Ship Name",
						width: 280
					},
					{
						field: "ShipAddress",
						title: "Ship Address"
					},
					{
						field: "ShipCity",
						title: "Ship City",
						width: 160
					},
					{
						field: "ShipCountry",
						title: "Ship Country",
						width: 160
					}
				],
				dataBound: function(e) {
					setTimeout(function() {
						$(".k-scrollbar-vertical div").attr("tabindex", "-1");
						$(".k-scrollbar-vertical div")[0].focus();
					})
				}
			});
			$(".k-virtual-scrollable-wrap").bind("click", function() {
				$(".k-scrollbar-vertical div")[0].focus();
			});
		});
	</script>
	<style>
		#grid table {
			min-width: 1190px;
		}
	</style>
</div>