# Column Menu

The Grid column menu provides quick access to column operations such as sorting, filtering, and visibility.

Enable the column menu with the `ColumnMenu(true)` method. When enabled, each column header renders a menu that lets users sort, filter, or change column visibility. The menu also respects disabled operations in the column definition and does not render their related UI. For a runnable example, refer to the [Grid Column Menu demo](https://demos.telerik.com/aspnet-mvc/grid/column-menu).

> note
> Starting with R3 2022, you can disable the column menu for a specific column by using `.ColumnMenu(false)`.

## Global Column Menu

Starting with Telerik UI for ASP.NET MVC R1 2024, you can display the column menu in the Grid [Toolbar](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/toolbar) instead of in each column header. The global column menu lets you control column visibility and clear all Grid filters through a single button.

The following example shows how to set up the global column menu and enable the clear-all-filters button.

```Razor HtmlHelper
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("grid")
        .ToolBar(toolbar => toolbar.Columns())
        .ColumnMenu(menu =>
        {
            menu.ClearAllFilters(true);
        })
        ...
    )
```

For a runnable example with the global column menu, see the [Grid Global Column Menu demo](https://demos.telerik.com/aspnet-mvc/grid/toolbar-columns-menu).

## Column Reordering

Starting with Telerik UI for ASP.NET MVC R2 SP1 2023, the Grid column menu provides options to change the target column position by using the **Move next** and **Move previous** buttons. This functionality requires enabled column reordering.

```Razor HtmlHelper
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("grid")
        .Reorderable(reorder => reorder.Columns(true))
    )
```

To see this functionality in action, check the [Grid Column Menu demo](https://demos.telerik.com/aspnet-mvc/grid/column-menu).

## Column Grouping

Starting with Telerik UI for ASP.NET MVC R2 SP1 2023, the Grid column menu provides an option that lets users group or ungroup the Grid by the target column. To display this option in the column menu, enable grouping through the [`Groupable`](https://www.telerik.com/aspnet-mvc/documentation/api/kendo.mvc.ui.fluent/gridbuilder#groupable) configuration.

## Column Title Sorting

The column menu allows you to control the visibility of each Grid column. For this purpose, the column menu renders a child column menu with a checkbox for each Grid column.
By default, the Grid column titles in the child column menu are not sorted. They have the same order as the columns in the Grid. To sort the column titles in the child menu, use the `ColumnMenu()` method.

The following example demonstrates how to sort the column titles in the child menu in ascending order:

```Razor HtmlHelper
    .ColumnMenu(menu=>
           menu.Columns(columns => columns.Sort("asc"))
    )
```

## Column Title Grouping

The `ColumnMenu()` method accepts a `GridColumnMenuSettingsBuilder` that enables column grouping in the child menu. The `Columns()` group method expects a collection of model properties. The menu automatically uses Grid column titles when they are defined.

The following example demonstrates how to group columns by providing the model fields in a list of strings:

```Razor HtmlHelper
    .ColumnMenu(menu=>
           menu.Columns(columns => {
               columns.Groups(groups =>
               {
                   groups.Add().Title("Company Info").Columns(new List<string> { "CompanyName", "Country" });
                   groups.Add().Title("Contact Info").Columns(new List<string> { "ContactName", "ContactTitle" });
               });
           })
    )
```

## Column Menu Types

The Telerik UI for ASP.NET MVC Grid provides the following Column Menu component types:

| Column Menu Type | Description                                                                                                                                                                                                                                                    |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `classic`        | The default rendering mode of the Grid's Column Menu                                                                                                                                                                                                           |
| `modern`         | Introduced with R1 2021 version of the Telerik UI for ASP.NET MVC suite. The `modern` rendering mode aims to deliver a fresh look and feel to the Grid's Column Menu                                                                                           |
| `tabbed`         | Introduced with R3 SP1 2023 version of the Telerik UI for ASP.NET MVC suite. The `tabbed` component type delivers a more compact view without sacrificing the available space. The tabbed interface provides a neat way to organize items into related groups. |

By default, the column menu of the Grid is initialized in the `classic` render mode. To set it to `modern` or `tabbed`, configure the `ColumnMenu.ComponentType` option of the Telerik UI for ASP.NET MVC Grid as demonstrated below:

```Razor HtmlHelper
    @(Html.Kendo().Grid()
            .Name("grid")
            .ColumnMenu(m=>{
               m.ComponentType("tabbed");
            })
    )
```

## See Also

* [Column Menu by the Grid (Demo)](https://demos.telerik.com/aspnet-mvc/grid/column-menu)