Introduction

Normally, the navigation in Kendo Grid is enabled using the navigable property, which I have explained in my previous article. By doing this, we can switch from one cell to another cell using the tab key, but this navigation happens in all the cells of the Grid regardless of them being editable or non editable cells. This blog tells you how to skip the non-editable cell during navigation.
Kendo Grid With Navigation
Create a new HTML page. In my case, I named it kendoGrid.html.
KendoGrid.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Untitled</title>
  7. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">
  8. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">
  9. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">
  10. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">
  12. <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
  13. <script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>
  14. <script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>
  15. <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script></head>
  16. <body>
  17. <div id="example">
  18. <div id="grid"></div>
  20. <script>
  21. $(document).ready(function () {
  27. var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
  28. dataSource = new kendo.data.DataSource({
  29. transport: {
  30. read: {
  31. url: crudServiceBaseUrl + "/Products",
  32. dataType: "jsonp"
  33. },
  34. update: {
  35. url: crudServiceBaseUrl + "/Products/Update",
  36. dataType: "jsonp"
  37. },
  38. destroy: {
  39. url: crudServiceBaseUrl + "/Products/Destroy",
  40. dataType: "jsonp"
  41. },
  42. create: {
  43. url: crudServiceBaseUrl + "/Products/Create",
  44. dataType: "jsonp"
  45. },
  46. parameterMap: function(options, operation) {
  47. if (operation !== "read" && options.models) {
  48. return {models: kendo.stringify(options.models)};
  49. }
  50. }
  51. },
  52. batch: true,
  53. pageSize: 20,
  54. schema: {
  55. model: {
  56. id: "ProductID",
  57. fields: {
  58. ProductID: { editable: false, nullable: true },
  59. ProductName: { validation: { required: true } },
  60. UnitPrice: { type: "number", editable:false },
  61. Discontinued: { type: "boolean", editable:false },
  62. UnitsInStock: { type: "number", validation: { min: 0, required: true } }
  63. }
  64. }
  65. }
  66. });
  68. $("#grid").kendoGrid({
  69. dataSource: dataSource,
  70. navigatable: true,
  71. pageable: true,
  72. height: 550,
  73. toolbar: ["create", "save", "cancel"],
  74. columns: [
  75. {field:"ProductName",attributes: { class: "editable-cell" }},
  76. { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
  77. { field: "UnitsInStock", title: "Units In Stock", width: 120, attributes: { class: "editable-cell" } },
  78. { field: "Discontinued", width: 120 },
  79. { command: "destroy", title: " ", width: 150 }],
  80. editable: true
  81. })
  82. });
  84. </script>
  85. </div>
  87. </body>
  88. </html>
Result in Browser
From the above image, you can notice that the navigation happens for non editable columns also. Now, let us skip this navigation for non-editable columns with some simple logic.
Skip non editable column in navigation
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Untitled</title>
  7. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">
  8. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">
  9. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">
  10. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">
  12. <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
  13. <script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>
  14. <script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>
  15. <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script></head>
  16. <body>
  17. <div id="example">
  18. <div id="grid"></div>
  20. <script>
  21. $(document).ready(function () {
  23. function onGridKeydown(e) {
  25. if (e.keyCode === kendo.keys.TAB) {
  26. var grid = $(this).closest("[data-role=grid]").data("kendoGrid");
  27. var current = grid.current();
  28. if (!current.hasClass("editable-cell")) {
  29. var nextCell = current.nextAll(".editable-cell");
  30. if (!nextCell[0]) {
  31. var nextRow = current.parent().next();
  32. var nextCell = current.parent().next().children(".editable-cell:first");
  33. }
  34. grid.current(nextCell);
  35. grid.editCell(nextCell[0])
  36. }
  37. }
  38. }
  42. var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
  43. dataSource = new kendo.data.DataSource({
  44. transport: {
  45. read: {
  46. url: crudServiceBaseUrl + "/Products",
  47. dataType: "jsonp"
  48. },
  49. update: {
  50. url: crudServiceBaseUrl + "/Products/Update",
  51. dataType: "jsonp"
  52. },
  53. destroy: {
  54. url: crudServiceBaseUrl + "/Products/Destroy",
  55. dataType: "jsonp"
  56. },
  57. create: {
  58. url: crudServiceBaseUrl + "/Products/Create",
  59. dataType: "jsonp"
  60. },
  61. parameterMap: function(options, operation) {
  62. if (operation !== "read" && options.models) {
  63. return {models: kendo.stringify(options.models)};
  64. }
  65. }
  66. },
  67. batch: true,
  68. pageSize: 20,
  69. schema: {
  70. model: {
  71. id: "ProductID",
  72. fields: {
  73. ProductID: { editable: false, nullable: true },
  74. ProductName: { validation: { required: true } },
  75. UnitPrice: { type: "number", editable:false },
  76. Discontinued: { type: "boolean", editable:false },
  77. UnitsInStock: { type: "number", validation: { min: 0, required: true } }
  78. }
  79. }
  80. }
  81. });
  83. $("#grid").kendoGrid({
  84. dataSource: dataSource,
  85. navigatable: true,
  86. pageable: true,
  87. height: 550,
  88. toolbar: ["create", "save", "cancel"],
  89. columns: [
  90. {field:"ProductName",attributes: { class: "editable-cell" }},
  91. { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
  92. { field: "UnitsInStock", title: "Units In Stock", width: 120, attributes: { class: "editable-cell" } },
  93. { field: "Discontinued", width: 120 },
  94. { command: "destroy", title: " ", width: 150 }],
  95. editable: true
  96. }).find("table").on("keydown", onGridKeydown);
  97. });
  99. </script>
  100. </div>
  102. </body>
  103. </html>
In the above code, a key down event function is written where the logic to skip the non editable column is written.
Result in Browser


From the above image, you can notice that the second column which is non-editable is skipped and the next editable column gets published.
I hope you have enjoyed this blog. Your valuable feedback, questions, and comments about this blog are always welcome.