Kendo grid data source field hide attributes

Question

I am trying to hide fields from kendo grid datasource based on some condition. tried attributes, hidden, enabled --- not working. code is looking like below.

    return new kendo.data.DataSource({
    schema: {
    model: {
    fields: {
        Id: { type: 'number', nullable: false, editable: false, defaultValue:null},
        Frist Name: {type: 'string', nullable: false, editable: false, defaultValue: 'fTest'},
        Last Name: {type:'string', nullable: false, editable: true, defaultValue: 'LTest'},
        BirthDate: {type:'date', nullable: false, editable: true},
        Type: {type:'string', nullable: false, editable: true},

        Field1: {type:'string', hidden:true, defaultValue: ''},

I am trying to hide Field1 if some condition is met. Any help would be greatly appreciated.

Answer 1

Apply "hidden: true" in column[{..}] section instead of fields:{..}

adding hidden: true to hide column during grid definition

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

Below are some ways to hide column

Hide a column by css selector

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

Hide a column by index

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

Hide a column by field

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]);