Edit this page

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.

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

Important

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>
    <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) {

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

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

          //3 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

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy