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

ColumnMenu

configuration

If set to true the grid will display the column menu when the user clicks the chevron icon in the column headers. The column menu allows the user to show and hide columns, filter and sort (if filtering and sorting are enabled). By default the column menu is not enabled.

Can be set to a JavaScript object which represents the column menu configuration.

columnMenu

Boolean|Object

Default: false

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

Check Column menu for a live demo.

columnMenu.adaptiveMode

String

If set to auto and the filterMenu will use adaptive rendering.

The Adaptive Rendering of the Column Menu is available only for moderncomponentType

Default: 'none'

<div id="grid"></div>
<script type="module">
$("#grid").kendoGrid({
   columns: [
     { field: "name" },
     { field: "age" },
     { command: "destroy" }
   ],
   dataSource: [
     { name: "Jane Doe", age: 30 },
     { name: "John Doe", age: 33 }
   ],
   filterable: true,
   columnMenu: {
    componentType: "modern",
    adaptiveMode: "auto",
   },
   adaptiveMode: "none",
   height: 550
});
</script>

columnMenu.autoSize

Boolean

If set to true the column menu would allow the user to fit one or all columns to the width of their content. This setting is available only when the tabbed componentType is used.

Default: false

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

columnMenu.clearAllFilters

Boolean

If set to true, the global column menu will render a button to allow the user to clear all filters applied to the grid.

Default: false

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

columnMenu.columns

Boolean|Object

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.

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.componentType

String

Specifies the component type of the column menu.

"classic" - Uses the standard rendering of the column menu.
"modern" - Uses new rendering with a fresh and modern look and feel.
"tabbed" - Uses the rendering of the "modern" menu, but splits its content into different tabs.

Default: "classic"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName", title: "Product" },
    { field: "unitPrice", title: "Price" },
    { field: "category", title: "Category" }
  ],
  dataSource: [
    { productName: "Tea", unitPrice: 2.5, category: "Beverages" },
    { productName: "Coffee", unitPrice: 3.0, category: "Beverages" }
  ],
  columnMenu: {
    componentType: "modern"
  }
});
</script>

columnMenu.filterable

Boolean

If set to true the column menu would allow the user to filter the grid. By default the column menu allows the user to filter if filtering is enabled via the filterable.

Default: true

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

columnMenu.messages

Object

The text messages displayed in the column menu. Use it to customize or localize the column menu messages.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  columnMenu: {
    messages: {
      columns: "Choose columns",
      filter: "Apply filter",
      sortAscending: "Sort (asc)",
      sortDescending: "Sort (desc)"
    }
  },
  sortable: true,
  filterable: true,
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ]
});
</script>

columnMenu.sortable

Boolean

If set to true the column menu would allow the user to sort the grid by the column field. By default the column menu allows the user to sort if sorting is enabled via the sortable option.

If this option is set to false the user could still sort by clicking the column header cell.

Default: true

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

Related Members