hideColumn
Hides the specified grid column.
Check the Column widths help section for additional relevant information.
Parameters
column Number|String|Object|Array
The index of the column, or the field to which the columns is bound, or the column object obtained from the columns collection, or array of indexes, or array of fields, or array of column objects obtained from the collection of columns, or array of mixed values.
When using multicolumn headers, using an index will hide a top-level column together with all its "child columns". In such scenarios, using field names or column objects may be more appropriate.
Example - hide a column by index
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" },
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
var grid = $("#grid").data("kendoGrid");
grid.hideColumn(1);
</script>
Example - hide a column by field
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
var grid = $("#grid").data("kendoGrid");
grid.hideColumn("age");
</script>
Example - hide a column by column object reference
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [{
title: "Person",
columns: [
{ field: "fname", title: "First name"},
{ field: "lname", title: "Last name"}
]}, {
field: "age"
}
],
dataSource: [
{ fname: "Jane", lname: "Smith", age: 30 },
{ fname: "John", lname: "Stevens", age: 33 }
]
});
var grid = $("#grid").data("kendoGrid");
grid.hideColumn(grid.columns[0].columns[1]);
</script>
Example - hide a column by array of mixed values
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" },
{ field: "height" }
],
dataSource: [
{ name: "Jane Doe", age: 30, height: 1.75 },
{ name: "John Doe", age: 33, height: 1.82 }
]
});
var grid = $("#grid").data("kendoGrid");
grid.hideColumn([0, 'age']);
</script>