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

Enabling Tabbed Focus on Column Headers in Kendo UI Grid

Environment

ProductKendo UI for jQuery Grid /
Version2024.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.

    javascript
    $("#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.

    javascript
    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: {
            transport: {
              read: "https://demos.telerik.com/service/v2/core/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