New to Kendo UI for jQueryStart a free 30-day trial

Navigate Virtual Scrolling in Grid with Up and Down Arrows

Environment

Product Version2018.1 221
ProductProgress® 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>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support