New to Kendo UI for jQuery? Start a free 30-day trial

HideColumn

methods

Hides the specified grid column.

Check the Column widths help section for additional relevant information.

hideColumn

Parameters:columnNumber|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.

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

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

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

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