New to Kendo UI for jQuery? Download free 30-day trial

Change the Column Names inside the Column Menu of the Grid


Product Progress Kendo UI Grid
Progress Kendo UI version Created with the 2017.3.1026 version


How can I change the names of the columns inside the column menu in the Grid?


  1. In the columnMenuInit event handler, get the list of the column names.
  2. For each element, find the inner span.
  3. Assign the new text value to the nodeValue of the lastChild element of the span.
<div id="grid"></div>
        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.nodeValue;

                span[0].lastChild.nodeValue = 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";
In this article
Not finding the help you need? Improve this article