JSFiddle - React, Tailwind, and code Playground

by Premkumar Jayaseelan

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<div id='grid'></div>
<div id='menu' />

CSS

.k-menu-horizontal
/* for all horizontal menus */
 {
    display: inline-block;
}

JavaScript

var grid = $("#grid").kendoGrid({
    dataSource: [{
        foo: "foo",
        bar: "bar"
    }],
    filterable: true,
    columnMenu: false
}).getKendoGrid();

var ds = [];
for (var i = 0, max = grid.columns.length; i < max; i++) {
    ds.push({
        encoded: false,
        text: "<label><input type='checkbox' checked='checked' " +
              " class='check' data-field='" + grid.columns[i].field + 
              "'/>" + grid.columns[i].field + "</label>"
    });
}

$("#menu").kendoMenu({
    dataSource: [{
        text: "Menu",
        items: ds
    }],
    openOnClick: true,
    closeOnClick: false,
    open: function () {
        var selector;
        $.each(grid.columns, function () {
            if (this.hidden) {
                selector = "input[data-field='" + this.field + "']";
                $(selector).prop("checked", false);
            }
        });
    },
    select: function (e) {
        // don't show/hide for menu button
        if ($(e.item).parent().filter("div").length) return;
		
        console.log("******");
        
        var input = $(e.item).find("input.check");
        var field = $(input).data("field");
        if ($(input).is(":checked")) {
            grid.showColumn(field);
        } else {
            grid.hideColumn(field);
        }
    }
});