stackoverflow demo: adding custom entry to grid's column menu

by Ramchand Repalle

HTML

<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<div style="width: 90%; height: 400px">
    <table id="grid" style="width: 100%; heigth: 100%"></table>
</div>

JavaScript

var localData = [];

var someBool = true;
var someText = "sometext";
for (var i = 0, max_i = 100; i < max_i; i += 1) {
    if (i > 10) {
        someText = "aText";
    }

    if (i > 20) {
        someBool = false;
    }
    localData.push({
        Id: i,
        StatusText: someText,
        someBool: someBool
    });

    if (i % 3 === 0) {
        someBool = null;
        someText = null;
    } else {
        someBool = !someBool;
        someText = "sometext";
    }
}

var dataSource = new kendo.data.DataSource({
    data: localData,
    schema: {
        model: {
            fields: {
                Id: {
                    type: "number"
                },
                StatusText: {
                    type: "string"
                },
                someBool: {
                    type: "boolean"
                }
            }
        }
    }
});

var grid = $("#grid").kendoGrid({
    dataSource: dataSource,
    columnMenu: true,

    scrollable: true,
    height: 500,
    sortable: false,
    filterable: true,
    groupable: true,
    columns: [{
        field: "Id",
        title: "Id",
        filterable: false
    }, {
        field: "StatusText",
        title: "String value"
    }, {
        field: "someBool",
        title: "Boolean value"
    }],
    columnMenuInit: function (e) {
        var menu = e.container.find(".k-menu").data("kendoMenu");
        var field = e.field;

        // Option 1: use the kendoMenu API ...
        menu.append({
            text: "Rename"
        });

        // Option 2: or create custom html and append manually ..
        $(e.container).find("ul").append('<li id="my-id" class="k-item k-state-default" role="menuitem"><span class="k-link"><b>Manual entry</b></span></li>');

        // event handler
        menu.bind("select", function (e) {
            var menuText = $(e.item).text();
          alert(menuText);
            if (menuText == "Id") {
                alert("Rename for", field);
            } else...