DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.
Tree List

Column Chooser

If you want users to change column visibility at runtime, enable the Column Chooser. Set the columnChooser.enabled property to true. Note that you can make sure that certain columns always stay visible. To do so, set the columns[].allowHiding property to false.

To open the column chooser, users should click the button in the toolbar above the TreeList. The way users show and hide columns depends on the columnChooser.mode:

  • "dragAndDrop"
    Users drag and drop column headers to and from the column chooser.

  • "select"
    Users select and deselect check boxes with column names.

In "select" mode, you can choose whether parent element selection affects child/nested elements. Use the selection.recursive property.

If the column chooser contains many hidden columns, you can enable the column search UI. Assign true to the search.enabled property.

In this demo, use the check boxes below the TreeList to toggle the selection and search features.

To hide a column in code, set the columns[].visible property to false.

Thank you for your interest in our ASP.NET Core product libraries and UI component suite. We are moving ASP.NET Core-related demos and content to Please make sure to update your bookmarks with our new URL.

View Demo