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

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;
}
}
}