Post
Ask Question

Get Column Name Of The Selected Cell In Kendo Grid Using jQuery

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" />  
  22.   
  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.         },    
  47.     
  48.     }    
  49.     },    
  50.     })    
  51.         
  52.     
  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.     ],      
  64.        
  65.                 
  66. });       
  67. });    
  68.     
  69.   function onChange(e)  
  70.   {  
  71.      
  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.   }  
  77.      
  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