How Can I Hide Kendo UI Grid Columns using JavaScript, React, Angular, Vue or ASP.NET MVC

Question

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 1

Using JavaScript

See the Kendo UI API reference.

Hide a column during grid definition

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

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

Using React

See the Kendo UI for React API reference

Hide a column during grid definition

You can set show: false:

class App extends React.Component {
  columns = [
    {
      title: 'Product Id',
      field: 'ProductID',
      show: false
    },
    {
      title: 'Product Name',
      field: 'ProductName',
      show: true
    },
    {
      title: 'Unit Price',
      field: 'UnitPrice',
      show: true
    }
  ]

  constructor() {
    super();
    this.state = {
      columns: this.columns,
      show:false
    };
  }

  render() {
    return (
      <div>
        <Grid data={products} >
          {this.state.columns.map((column, idx) =>
            column.show && (<Column key={idx} field={column.field} title={column.title} />)
          )}
        </Grid>
      </div>
    );
  }
}

Using Angular

See the Kendo UI for Angular API reference

Hide a column during grid definition

You can add [hidden]="true"

@Component({
    selector: 'my-app',
    template: `
        <kendo-grid [data]="gridData" [scrollable]="scrollable" style="height: 200px">
            <kendo-grid-column [hidden]="true" field="ID" width="120">
            </kendo-grid-column>
            <kendo-grid-column field="ProductName" title="Product Name" width="200">
            </kendo-grid-column>
            <kendo-grid-column field="UnitPrice" title="Unit Price" width="230">
            </kendo-grid-column>
       </kendo-grid>
    `
})

Programmatically hide a column

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <button (click)="restoreColumns()" class="k-button">Restore hidden columns</button>
        </div>

        <kendo-grid [data]="gridData" style="height:400px">
            <ng-template ngFor [ngForOf]="columns" let-column>
                <kendo-grid-column field="{{column}}" [hidden]="hiddenColumns.indexOf(column) > -1" >
                    <ng-template kendoGridHeaderTemplate let-dataItem>
                        {{dataItem.field}}
                        <button (click)="hideColumn(dataItem.field)" class="k-button k-primary" style="float: right;">
                            Hide
                        </button>
                    </ng-template>
                </kendo-grid-column>
            </ng-template>
        </kendo-grid>
    `
})

export class AppComponent {
    public gridData: any[] = sampleCustomers;

    public columns: string[] = [ 'CompanyName', 'ContactName', 'ContactTitle' ];

    public hiddenColumns: string[] = [];

    public restoreColumns(): void {
        this.hiddenColumns = [];
    }

    public hideColumn(field: string): void {
        this.hiddenColumns.push(field);
    }
}

Using Vue

See the Kendo UI for Vue API reference

Hide a column during grid definition

You can add :hidden="true"

<kendo-grid :height="600"
            :data-source-ref="'datasource1'"
            :pageable='true'>
    <kendo-grid-column field="ProductID" :hidden="true"></kendo-grid-column>
    <kendo-grid-column field="ProductName"></kendo-grid-column>
    <kendo-grid-column field="UnitPrice" title="Unit Price" :width="120" :format="'{0:c}'"></kendo-grid-column>
    <kendo-grid-column field="UnitsInStock" title="Units In Stock" :width="120"></kendo-grid-column>
</kendo-grid>

Using ASP.NET MVC

See the Kendo MVC API reference

Hide a column during grid definition

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

Using PHP

See the Kendo UI for PHP API reference

Hide a column during grid definition

<?php
    $column = new \Kendo\UI\GridColumn();
    $column->hidden(true);
?>

Answer 2

As @Nic says there are multiple ways of hiding a column but I'm gonna assume that you are using KendoUI methods for hiding it. I.e: set the column hidden to true or programmatically invoke hideColumn.

If so, you should remember that you model might have fields that are not displayed or not even mapped in columns but they exist and you can still access them.

If we have the following Grid definition:

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    selectable: true,
    ...
    columns   :
    [
        { field: "Id", hidden: true },
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 200, title: "Last Name" }
    ]
}).data("kendoGrid");

Where I've declared a column Id as hidden. I still can access the value of Id by going to the model using:

// I want to access the Id for row 3
var row = $("tr:eq(3)", "#grid");
// Retrieve the item from the grid using dataItem method
var item = $("#grid").data("kendoGrid").dataItem(row);
// Show Id
alert("Id is " + item.Id); 

Runnable example

var grid = $("#grid").kendoGrid({
  dataSource: [
    { Id: 1, FirstName: "John", LastName: "Smith" },
    { Id: 2, FirstName: "Jane", LastName: "Smith" },
    { Id: 3, FirstName: "Jack", LastName: "Smith" },
    { Id: 4, FirstName: "Joseph", LastName: "Smith" },
    { Id: 5, FirstName: "Jeff", LastName: "Smith" },
  ],
    selectable: true,
    columns   :
    [
    { field: "Id", hidden: true },
    { field: "FirstName", width: 90, title: "First Name" },
    { field: "LastName", width: 200, title: "Last Name" }
  ]
}).data("kendoGrid");

$("#show").on("click", function(e) {
  var row = grid.select();
  if (row) {
    var item = grid.dataItem(row);
    alert ("The ID is :" + item.Id);
  } else { 
    alert("Select a row");
  }
});

#grid {
    width : 490px;
}

<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.903/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>

Select row and click <button id="show" class="k-button">Here</button> to show hidden Id.
<div id="grid"></div>