Change the Column Names inside the Column Menu of the Grid
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Product Version | Created with the 2017.3.1026 version |
Description
How can I change the names of the columns inside the column menu in the Grid?
Solution
- In the
columnMenuInit
event handler, get the list of the column names. - For each element,
find
the innerspan
. - Assign the new text value to the
textContent
of thelastChild
element of thespan
.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [{
field: "name"
},
{
field: "age"
}
],
columnMenu: true,
columnMenuInit: function(e) {
var mylist = e.container.find(".k-columns-item>ul");
mylist.children().each(function(e) {
var span = $(this).find("span");
var text = span[0].lastChild.textContent;
span[0].lastChild.textContent = changeLabelText(text);
});
},
dataSource: [{
name: "Jane Doe",
age: 30
},
{
name: "John Doe",
age: 33
}
]
});
function changeLabelText(text) {
if (text === "Select All") return text;
return text + " + myText";
}
</script>