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

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

  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 textContent of the lastChild element of the span.
<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>
In this article