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

Disabling Grid Header Keyboard Navigation


Property Value
Product Grid for Progress® Kendo UI®
Version 2023.1.117


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.


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>
      $(document).ready(function() {
          navigate: function(e){              
              var index = e.sender.current().index()
              var nextCell = e.sender.tbody.find("tr:eq(0) td:eq("+index+")");
          dataSource: {
            type: "odata",
            transport: {
              read: ""
            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: [
              filterable: false
              field: "OrderDate",
              title: "Order Date",
              format: "{0:MM/dd/yyyy}"
            }, {
              field: "ShipName",
              title: "Ship Name"
            }, {
              field: "ShipCity",
              title: "Ship City"
In this article