JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css "></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css">
<input type="checkbox" id="check" /> Hide
<br />
<div id="grdPort" 
    data-role="grid" 
    data-scrollable="true" 
    data-selectable="multiple" 
    data-bind="source: grdPortRating"
    data-columns='[{"field": "port", "title" : "Port Rating", "width":"50%"}]'
    class="k-grid-content-listView">
</div>

CSS

#grdPort {
 width: 180px;
 margin: 20px auto;    
}

JavaScript

var viewModel = kendo.observable({
    grdPortRating: new kendo.data.DataSource({
        data: [
            {port: 1},
            {port: 2},
            {port: 3},
            {port: 4}
        ]
    })
});

kendo.bind($("body"), viewModel);

$("#check").change(function(e) {
    if(this.checked) {
        $("#grdPort .k-grid-header")
            .find("th[data-field='port']")
            .css({visibility: "hidden"});
        
        var grid = $("#grdPort").data("kendoGrid"),
            position = grid.element.find(".k-grid-content").offset(),
            width = grid.element.find(".k-grid-content").outerWidth(),
            height = grid.element.find(".k-grid-content").outerHeight(),
            overlay = $("<div class='overlay'>");
        
        overlay.css({
            position: "absolute", 
            top: position.top, 
            left: position.left, 
            width: width, 
            height: height
        }).appendTo("body");
    } else {
        $("#grdPort .k-grid-header")
            .find("th[data-field='port']")
            .css({visibility: "visible"});
        
        $(".overlay").remove();
    }
});