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:
- Reference the Grid.
- Obtain the selected cell and its
index. - Find the table header DOM element corresponding to the
indexand 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>