KendoGrid 动态显示/隐藏列(Column)

原文出处： https://stackoverflow.com/questions/19930850/kendo-grid-columns-hide-show-enable-disable

演示地址 :  http://jsfiddle.net/OnaBai/XNcmt
html

<button id="show_col1" class="k-button">Show First Name</button>
<button id="hide_col1" class="k-button">Hide First Name</button>
<div id="grid"></div>

js

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

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 }
    ]
}).data("kendoGrid");

$("#show_col1").on("click", function() {
    grid.showColumn(0);
});

$("#hide_col1").on("click", function() {
    grid.hideColumn("FirstName");
});

效果图