Get Grid Column Title upon Cell Selection

Environment

Product Grid for ProgressĀ® Kendo UIĀ®
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

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.

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

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