Column Menu

The TreeList provides a built-in option for triggering column operations through a menu.

To enable the column-menu implementation, set .ColumnMenu(). As a result, the column headers of the TreeList will render a column menu which allows the user to sort, filter, or change the visibility of the column. The column menu also detects when a specific column operation is disabled through the column definition and excludes the corresponding UI from its rendering.

When the ColumnMenu configuration is enabled, the TreeList fires the client-side columnMenuInit and columnMenuOpen events instead of filterMenuInit and filterMenuOpen.

    @(Html.Kendo().TreeList<Kendo.Mvc.Examples.Models.TreeList.EmployeeDirectoryModel>()
        .Name("treelist")
        .ColumnMenu()
        /* Other configuration. */
    )

    <kendo-treelist name="treelist">
        <column-menu enabled="true"/>
        <!-- Other configuration. -->
    </kendo-treelist>

For a runnable example, refer to the demo on implementing a column menu in the TreeList.

Column Reordering

As of Telerik UI for ASP.NET Core UI R2 SP1 2023, the TreeList's Column Menu provides an option to change the position of the target column by using Move next and Move previous buttons. Make sure the reordering functionality is also enabled:

    @(Html.Kendo().TreeList<Kendo.Mvc.Examples.Models.TreeList.EmployeeDirectoryModel>()
        .Name("treelist")
        .ColumnMenu()
        .Reorderable()
        /* Other configuration. */
    )

    <kendo-treelist name="treelist">
        <column-menu enabled="true"/>
        <reorderable enabled="true"/>
        <!-- Other configuration. -->
    </kendo-treelist>

See Also

• Column Menu by the TreeList HtmlHelper for ASP.NET Core (Demo)
• Server-Side API