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 on one of its cells even if the Kendo UI Grid is using grouping?

Solution

During the Kendo UI Grid's change event, here are the steps to get the column name when a cell is selected: 1. Reference the Grid. 2. Obtain the selected cell and its index. 3. Find the table header DOM element and get the data-title attribute.

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

The following demonstrates when a user clicks on a cell in a Kendo UI Grid, the column name will appear in the console.

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

Notes

This approach does not support multi-column headers.

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