New to Kendo UI for jQueryStart a free 30-day trial

Change the Column Names inside the Column Menu of the Grid

Environment

ProductProgress® Kendo UI® Grid for jQuery
Product VersionCreated 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
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support