JSFiddle - React, Tailwind, and code Playground

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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id='grid'></div>
<div id='menu' />

CSS

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

.red{
    color: red;
    background: 
}

.blue{
    color:blue;
}

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 class='fa fa-check-square-o'>" + grid.columns[i].field + "</label>"
    });
}
var droplist = ["foo", "bar"];

$("#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;
		var removeItemFlag = false;
        var input = $(e.item).find("label");
        console.log(input[0].innerHTML);
        var selectedValue = input[0].innerHTML;

        if(selectedValue)
        {
            for(var i=0; i< droplist.length; i++){
                if(droplist[i] === selectedValue){
                    removeItemFlag = true
                    input[0].classList.remove = "fa fa-check-square-o";
                    input[0].className = "fa fa-square-o";
                    break;
                }
            }
            var selectedIndex = droplist.indexOf(selectedValue);
            if (selectedIndex > -1 && removeItemFlag) {
    			droplist.splice(selectedIndex, 1);
                 grid.hideColumn(selectedValue);
                
			}else{
                droplist.push(selectedValue);
                grid.showColumn(selectedValue);
                input[0].className = "fa fa-check-square-o";
            }
        }
    }
});