New to Kendo UI for jQuery? Start a free 30-day trial

ColumnMenu.columns

configuration

If set to true the column menu would allow the user to select (show and hide) grid columns. By default the column menu allows column selection.

columnMenu.columns

Boolean|Object

Default: true

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

columnMenu.columns.groups

Array

The user defined groups of the columns visibility list.

Default: null

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name", title: 'Name' },
    { field: "age", title: 'Age' }
  ],
  columnMenu: {
    columns: {
      groups: [
        { title: 'first group', columns: ['Age'] },
        { title: 'second group', columns: ['Name'] }
      ]
    }
  },
  sortable: true,
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

columnMenu.columns.sort

String

The sort order which will be applied over the columns list. By default, the columns menu items are in the same order as the columns in the grid.

The supported values are:

"asc" (ascending order)
"desc" (descending order)

Default: null

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { field: "city" }
  ],
  columnMenu: {
    columns: {
      sort: "desc"
    }
  },
  sortable: true,
  dataSource: [
    { name: "Jane Doe", age: 30, city: "London" },
    { name: "John Doe", age: 33, city: "Madrid" }
  ]
});
</script>

ColumnMenu.columns

columnMenu.columns

columnMenu.columns.groups

columnMenu.columns.sort

Related Members