Enabling Tabbed Focus on Column Headers in Kendo UI Grid
Environment
Product | Kendo UI for jQuery Grid / |
---|---|
Version | 2024.1.319 |
Description
I'm having trouble getting tabbed focus on column headers in the Kendo UI Grid. I need to enable keyboard access to the filtering and sorting features to be WCAG compliant. The focus is directed to data cells and skips the headers.
Solution
To ensure that the Kendo UI Grid headers are accessible via keyboard navigation and comply with WCAG standards, follow these steps:
-
Enable the
navigatable
option in the Grid to activate keyboard navigation.$("#grid").kendoGrid({ navigatable: true, // other grid configurations });
-
Use the Grid's
current
method to set the initial focus on the first header cell when the Grid is focused.var grid = $("#grid").data("kendoGrid"); grid.table.on("focus", function(e) { grid.current($("th:first")); });
Below is a runnable example:
<input type="text" />
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
selectable: true,
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
navigatable: true,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [{
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
var grid = $("#grid").data("kendoGrid");
grid.table.on("focus",function(e){
grid.current($("th:first"))
});
});
</script>
Notes
- It is important to ensure that the
navigatable
option is enabled for keyboard navigation to work as expected.