New to Kendo UI for jQuery? Download free 30-day trial

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:

  1. Enable the navigatable option in the Grid to activate keyboard navigation.

    $("#grid").kendoGrid({
       navigatable: true,
       // other grid configurations
    });
    
  2. 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.

See Also

In this article