kendo-ui - Kendo Grid columns Hide/Show, Enable/Disable

Question

How to hide/show and Enable/Disable columns in kendo grid on condition or event. I could only find option of enable/disable kendogrid column in .model

Any help is appreciated.

Thank you in advance!

Answer 1

You showing/hiding columns in KendoUI Grid you should use showColumn and hideColumnand use as argument a number (the index of the column that you want to show/hide) or a string (the name of the field associated in that column).

Example:

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable  : false,
    pageable  : true,
    columns   :
    [
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 90, title: "Last Name" },
        { field: "City", width: 100 }
    ]
}).data("kendoGrid");

$("#show_col1").on("click", function() {
    // Use the index of the column to show
    grid.showColumn(0);
});

$("#hide_col1").on("click", function() {
    // Use the name of the field to hide it
    grid.hideColumn("FirstName");
});

You can control if the column should be initially hidden by setting hidden in the column initialization.

See an example here : http://jsfiddle.net/OnaBai/XNcmt

Answer 2

The Kendo grid contains a showColumn method that will take either an index or the column name string. To enable hiding/displaying columns, you'll initialize the grid columnX as a normal column, and mark it hidden (in MVC this is the .Hidden() method when binding the column). Then based on a page event, you can simply call showColumn (and then hideColumn to reverse the operation).

Answer 3

For Kendo Grid that has already been created, you can show/hide make all columns editable/uneditable by:

var allowEdit = false;
var grid = $("#sampleGrid").data("kendoGrid");
grid.showColumn(0);
grid.showColumn(1);

if (!allowEdit) {
    grid.hideColumn(0);
    grid.hideColumn(1);
}
var len = $("#sampleGrid").find("tbody tr").length;
for (var i = 0; i <= len ; i++) {
    var model = $("#sampleGrid").data("kendoGrid").dataSource.at(i);
    if (model) {
        for (i = 0; i <= (grid.columns.length - 1) ; i++) {
            var column = grid.columns[i];
            model.fields[column.field].editable = allowEdit;
        }
    }
}