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

Column menu

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
  • Edit in Kendo UI Dojo
  • Change Theme
    default
    SASS
    LESS
    Default Theme
    • Main
    • Main Dark
    • Nordic
    • Ocean Blue
    • Purple
    • Turquoise
    Bootstrap Theme
    • Main
    • Main Dark
    • Nordic
    • Urban
    • Vintage
    Material Theme
    • Main
    • Arctic
    • Lime Dark
    • Main Dark
    • Nova
    Classic Theme
    • Main
    • Main Dark
    • Opal
    • Silver
    Fluent Theme
    • Main
    Launch Theme Builder
column-menu.html
Sample service

Also available for:

API REFERENCE

Description

When you interact with grid columns, you may want to be able to trigger column operations via a dedicated menu for this purpose. The Kendo UI Grid has built-in support for such a feature, which can be enabled via a single configuration setting, i.e. columnMenu:true. Thus an option to display a column menu will be rendered in the grid column headers represented by three dots, which when activated allows  you to sort, filter or change the visibility of the column. Furthermore, this menu takes into account whether a certain column operation is disabled via the column definition, and excludes the corresponding UI from its rendering. In this showcase this is done for the ShipAddress column where filtering is disabled.

This example also shows how to group and sort the columns in the menu by providing a columnMenu.colums.group and columnMenu.colums.sort configuratons.

Further information about the columnMenu can be collected from this article.

Support & Learning Resources