showColumn

Shows the specified 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 - show a hidden column by index

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age", hidden: true }
  ],
  dataSource: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
  ]
});
var grid = $("#grid").data("kendoGrid");
grid.showColumn(1);
</script>

Example - show a hidden column by field

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age", hidden: true }
  ],
  dataSource: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
  ]
});
var grid = $("#grid").data("kendoGrid");
grid.showColumn("age");
</script>

Example - show 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", hidden: true}
        ]}, {
            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 - show a hidden columns by array of mixed values

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name", hidden: true },
    { field: "age", hidden: true },
    { field: "height" }
  ],
  dataSource: [
      { name: "Jane Doe", age: 30, height: 1.75 },
      { name: "John Doe", age: 33, height: 1.78 }
  ]
});
var grid = $("#grid").data("kendoGrid");
grid.showColumn([1, "age"]);
</script>