Show / Hide columns programmatically

by OnaBai

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<div id="grid"></div>
<div id="my-win"></div>
    <script id="my-template" type="text/kendo-template">
        <div>#= FirstName #</div>
        <div>#= LastName #</div>
        <div>#= City #</div>
    </script>

CSS

#grid {
    width : 490px;
}

JavaScript

var ds = {
    data    : createRandomData(20),
    pageSize: 10,
    schema  : {
        model: {
            fields: {
                Id       : { type: 'number' },
                FirstName: { type: 'string' },
                LastName : { type: 'string' },
                City     : { type: 'string' }
            }
        }
    }
};

var template = kendo.template($("#my-template").html());
var win = $("#my-win").kendoWindow({
    title : "Selected Data",
    visible : false
}).data("kendoWindow");

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable  : false,
    pageable  : true,
    columns   :
    [
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 200, title: "Last Name" },
        { field: "City", width: 200 }
    ],
    change: function(e) {
        var item = this.dataItem(this.select());
        console.log("item", item);
        //show in a window.
        win.content(template(item));
        win.open();
    },
    selectable: "row"
}).data("kendoGrid");