Get Grid Column Title upon Cell Selection


Product Grid for ProgressĀ® Kendo UIĀ®
Product Version 2018.2.516


How can I get the name of a column when a user clicks one of its cells even if the Kendo UI Grid is using grouping?


During the change event of the Grid: 1. Reference the Grid. 2. Obtain the selected cell and its index. 3. Find the DOM element of the table header and get the attribute of the data title.

    change: function(e) {
      var grid = e.sender;
      var cellIndex =;
      var columnTitle = grid.thead.find('th')[cellIndex].getAttribute("data-title");


The suggested approach is not applicable to multi-column headers.

The following example demonstrates how to display the column name in the console when the user clicks a Grid cell.

    <div id="grid"></div>
        dataSource: [
          { id: 1, name: "John", age: 33},
          { id: 2, name: "Jane", age: 34},
          { id: 3, name: "Jack", age: 35},
          { id: 4, name: "Judy", age: 53}
        columns: [{
          field: "id",
          title: "Column One"
          field: "name",
          title: "Column Two"
          field: "age",
          title: "Column Three"
        filterable: true,
        selectable: "cell",
        groupable: "true",
        change: function(e) {

          //1 Reference the Grid.
          var grid = e.sender;

          //2 Obtain the selected cell's index.
          var cellIndex =;

          //3 Find the table header DOM element and get the data-title attribute.
          var columnTitle = grid.thead.find('th')[cellIndex].getAttribute("data-title");

See Also

In this article
Not finding the help you need? Improve this article