This blog will tell you how to get the title of the selected column in Kendo Grid using the column index in the change event.

kendoGrid.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Untitled</title>
  6. <style>
  7. html
  8. { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }
  9. .messageArea
  10. {
  11. margin-top:22px
  12. }
  13. #message
  14. {
  15. color:orange;
  16. }
  17. </style>
  18. <title></title>
  19. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" />
  20. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.highcontrast.min.css" />
  21. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.highcontrast.mobile.min.css" />
  23. <script src="https://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
  24. <script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
  25. <body>
  26. <h3>Kendo Grid </h3>
  27. <div id="grid"></div>
  28. <div class="messageArea">
  29. Selected Cell Column Name : <label type="text" class="form-control" id="message">
  30. <div>
  31. <script>
  32. $(document).ready(function()
  33. {
  34. dataSource = new kendo.data.DataSource({
  35. data:[{ ProductID:1, productName: "Tea", category: "Beverages" },
  36. { ProductID:2, productName: "Coffee", category: "Beverages" },
  37. { ProductID:3, productName: "Ham", category: "Food" },
  38. { ProductID:4, productName: "Bread", category: "Food" } ],
  39. schema:{
  40. model:{
  41. id:"ProductID",
  42. fields:{
  43. ProductID:{editable:false,nullable:true},
  44. productName:{editable:true},
  45. Category:{editable:true}
  46. },
  48. }
  49. },
  50. })
  53. $("#grid").kendoGrid({
  54. dataSource: dataSource,
  55. selectable: "cell",
  56. allowCopy: true,
  57. editable:true,
  58. navigatable:true,
  59. change: onChange,
  60. columns: [
  61. { field: "productName", title:"Product Name" },
  62. { field: "category",title:"Category"}
  63. ],
  66. });
  67. });
  69. function onChange(e)
  70. {
  72. var grid = $("#grid").data("kendoGrid");
  73. var colIdx = grid.select().closest("td").index();
  74. var columnheader= this.options.columns[colIdx].title;
  75. $("#message").text(columnheader);
  76. }
  78. </script>
  79. </body>
  80. </html>

We need a column index detail to get the name of the column which is selected. We will use the change event in the grid which will trigger while the column gets selected.

  • select() will give the information about the selected cell in grid.
  • grid.select().closest("td").index() -> will give the index detail of the selected cell.
  • this.options.columns[colIdx].title -> will give the selected cell column title.
Result