Get Grid Column Title upon Cell Selection

Environment

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

Description

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?

Solution

In the change event of the Grid:

1. Reference the Grid.
2. Obtain the selected cell and its index.
3. Find the table header DOM element corresponding to the index and get the attribute of the data title.

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

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

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

    <div id="grid"></div>
    <script>
      $("#grid").kendoGrid({
        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) {

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

          // Obtain the selected cell's index.
          var cellIndex = grid.select().index();

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

See Also

• Demo on Kendo UI Grid Selection
• Demo on Using the Kendo UI Grid API