Disabling Grid Header Keyboard Navigation

Updated on Dec 10, 2025

Environment

Product	Version
Grid for Progress® Kendo UI®	2023.1.117

Description

I want to disable keyboard navigation specifically in the header of a Kendo UI Grid. Currently, the keyboard navigation is enabled for the entire grid, including the header. However, I would like to have it enabled only for the grid data table.

Solution

To achieve the desired result, you can handle the navigate event of the Grid and check if the current element is part of the Grid header. If it is, select a cell from the first row of the Grid data.

Below you will find a runnable example:

    <div id="grid"></div>
    <script>
      $(document).ready(function() {
        $("#grid").kendoGrid({
          navigate: function(e){              
            if($(e.element[0]).is('th')){
              var index = e.sender.current().index()
              var nextCell = e.sender.tbody.find("tr:eq(0) td:eq("+index+")");
              e.sender.current(nextCell)
            }
            e.preventDefault()
          },
          dataSource: {
            type: "odata-v4",
            transport: {
              read: "https://demos.telerik.com/service/v2/odata/Orders"
            },
            schema: {
              model: {
                fields: {
                  OrderID: { type: "number" },
                  Freight: { type: "number" },
                  ShipName: { type: "string" },
                  OrderDate: { type: "date" },
                  ShipCity: { type: "string" }
                }
              }
            },
            pageSize: 20,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
          },
          height: 550,
          filterable: true,
          navigatable: true,
          pageable: true,
          columns: [
            {
              field:"OrderID",
              filterable: false
            },
            "Freight",
            {
              field: "OrderDate",
              title: "Order Date",
              format: "{0:MM/dd/yyyy}"
            }, {
              field: "ShipName",
              title: "Ship Name"
            }, {
              field: "ShipCity",
              title: "Ship City"
            }
          ]
        });
      });
    </script>