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 (
      

        
          {this.state.columns.map((column, idx) =>
            column.show && ()
          )}
        
      
    );
  }
}

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: `
        
            
            
            
            
            
            
       
    `
})

Programmatically hide a column

@Component({
    selector: 'my-app',
    template: `
        

            Restore hidden columns
        

        
            
                
                    
                        {{dataItem.field}}
                        
                            Hide
                        
                    
                
            
        
    `
})

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"

Using ASP.NET MVC

See the Kendo MVC API reference

Hide a column during grid definition

@(Html.Kendo().Grid()
    .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

hidden(true);
?>