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