user1076698 user1076698 - 4 months ago 90
C# Question

How can I hide columns in a Kendo UI Grid

I'm working on a HTML5 and JavaScript website.

Is it possible to have a hidden column in Kendo UI Grid and access the value using JQuery?

Answer

See the Kendo UI API definition.

Hiding during grid definition

Using the JavaScript implementation you can add hidden: true:

$("#gridName").kendoGrid({
  columns: [
    { hidden: true, field: "id" },
    { field: "name" }
  ],
  dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
});

Or, with Kendo MVC you can use Hidden():

@(Html.Kendo().Grid<Something>()
    .Name("GridName")
    .Columns(columns =>
    {
        columns.Bound(m => m.Id).Hidden()
        columns.Bound(m => m.Name)
    })
)

Hide a column by css selector

$("#gridName").find("table th").eq(1).hide();

Hide a column by column index

var grid = $("#gridName").data("kendoGrid");
grid.hideColumn(1);

Hide a column by column name

var grid = $("#gridName").data("kendoGrid");
grid.hideColumn("Name");

Hide a column by column object reference

var grid = $("#gridName").data("kendoGrid");
grid.hideColumn(grid.columns[0].columns[1]);