Blazor TreeList

• Mar 05, 2026
• 6 minutes to read

The DevExpress TreeList for Blazor (DxTreeList) combines the power of a traditional Grid with a TreeView in a single UI component. Use our TreeList component to display, manage, and shape hierarchical data.

Read Tutorial: Getting Started Run Demo: Overview View Example: Getting Started

API Reference

Refer to the following list for the component API reference: DxTreeList Members.

Data Binding

The DevExpress Blazor TreeList supports various data binding scenarios:

• Flat Data
• Hierarchical Data
• Observable Data Collections
• Server-Side Data
• Load Data on Demand

Run Demo: Data Binding

Sort Data

Users can sort data by an unlimited number of columns. The sort glyph indicates the current sort order (ascending or descending). You can also sort data in code.

Read Tutorial: Sort Data Run Demo: Sort Data

Edit Data

DevExpress Blazor TreeList supports multiple data edit modes:

Inline Edit Form

The TreeList displays the edit form instead of the edited data row.

Pop-Up Edit Form

The TreeList displays the edit form in a pop-up window.

Inline Edit Row

The TreeList displays inline editors instead of the edited row.

Cell Editing

The TreeList displays an in-place editor instead of focused cell content. Unlike other modes, the TreeList in EditCell mode allows users to click a data cell to edit it. The TreeList validates and saves all cell values simultaneously when focus leaves the edited row.

Batch Editing

You can implement batch data editing based on the EditCell mode. Batch data editing allows users to accumulate changes in memory and post them to the database when desired.

Read Tutorial: Edit Data Run Demo: Edit Data

Validate User Input

In every edit mode, you can enable the standard Blazor validation mechanism (based on DataAnnotationsValidator) or create custom validator components.

Read Tutorial: Validate User Input Run Demo: Input Validation

Filter Data

The DevExpress Blazor Grid ships with the following UI elements that allow users to filter data:

Column Filter Menu

The Excel-inspired filter menu displays unique column values as a checklist with a Select All option. An integrated search box is also available. You can modify the value list or use a template to customize the menu.

Filter Row

The filter row displays in-place editors where users can type filter values. The grid can filter data by value or display text.

Filter Panel and Filter Builder

The filter panel displays the current filter condition and allows users to deactivate/clear it. Users can click this filter condition to open the filter builder dialog. In the dialog, they can edit and combine filter criteria applied to Grid columns.

Search Box

Users can type text in the search box to filter and highlight data.

You can also filter Grid data in code using criteria operator syntax.

Read Tutorial: Filter API Run Demo: Filter API

Summary

You can compute total summaries across all TreeList records. The TreeList includes predefined aggregate functions: Sum, Min, Max, Avg, and Count. In addition to these functions, you can implement custom summary algorithms.

Read Tutorial: Summary Run Demo: Total Summary Run Demo: Custom Summary

Selection

The DevExpress Blazor TreeList supports single and multiple row selection. Users can click rows or use a specially designed column to select/deselect records. You can also manage selection in code.

Read Tutorial: Selection and Focus Run Demo: Multiple Row Selection

Focus

The DevExpress Blazor Grid supports a focused row that hightlights a row when a user clicks it.

Read Tutorial: Selection and Focus Run Demo: Focused Row

Templates

The TreeList implements a number of template properties that allow you to customize content and appearance of different TreeList elements. Templates implement a context parameter that contains element-related data and a reference to the TreeList component, so you can access its API.

Read Tutorial: Templates

Columns

The DevExpress Blazor TreeList includes different column types:

Data column

Obtains values from the bound data source.

Command column

Displays CRUD-related buttons (New, Edit, and Delete) and the Clear button that resets values in the filter row.

Selection column

Allows users to select and deselect rows. This column displays checkboxes in multiple selection mode and radio buttons in single selection mode.

Band Column

Allows you to combine columns into logical groups called bands. Each group has its own header.

All column types support various customization options. Refer to the following section for additional information: Column Settings.

Read Tutorial: Columns

Toolbar

You can add a toolbar at the top edge of a Grid component and implement data shaping operations to perform in the UI. Implement required commands and thus make them immediately available to users. The embedded toolbar automatically synchronizes its layout and styles with the TreeList component.

Run Demo

Context Menu

The DevExpress Blazor TreeList allows you to display context menus with predefined and custom commands.

Run Demo: Context Menu

Save and Restore Layout

You can save and restore the Grid layout automatically or on demand. Layout information includes the current page, column sort order and direction, column position, filter values, and grouped columns.

Run Demo: Save and Restore the Layout

Export Data

The TreeList allows you to export data to XLS, XLSX, CSV, and PDF. The output file reflects the current filter settings and sort order.

Read Tutorial: Export Data Run Demo: Export Data

Appearance

Specify the size mode to display Grid elements (for instance, text size and row height) and built-in components (for instance, pager and buttons) in small, medium, or large predefined sizes.

You can customize the appearance of most TreeList UI elements based on custom conditions.

Read Tutorial: Appearance Customization Run Demo: Conditional Formatting Run Demo: Alternating Row Style

Paging

The DevExpress Blazor TreeList splits data rows across multiple pages and displays a pager to enable data navigation. The pager can contain the page size selector, which allows users to change page size at runtime.

Read Tutorial: Paging Run Demo: Paging

Scrolling

The DevExpress Blazor TreeList component supports regular and virtual scrolling modes. You can specify these modes separately for rows or columns. You can also combine scrolling with paging. For instance, you can use regular horizontal scrolling with virtual vertical scrolling, or combine paging with column virtualization.

Read Tutorial: Scrolling Run Demo: Virtual Scrolling

Keyboard Support

Users can access every UI element in the TreeList with a keyboard. Keyboard navigation is implemented on the client and works seamlessly in Blazor Server apps with a slow connection.

Note

Keyboard support allows users to interact with application content in cases they cannot use a mouse or they rely on assistive technologies (like screen readers or switch devices). Refer to the Accessibility help topic for information on other accessibility areas that we address.

Read Tutorial: Keyboard Support

Drag and Drop Rows

The DevExpress Blazor TreeList supports drag-and-drop operations. You can reorder rows, move them between components, and change the component hierarchy.

Read Tutorial: Row Drag and Drop

Run Demo: Reorder Rows Run Demo: Between Components

Localization

The TreeList component’s UI elements such as labels, context menus, and error messages are displayed in English. Localization automatically adapts the component to the user’s preferred language.

DevExpress components include predefined satellite resource assemblies for German, Spanish, and Japanese. Use the DevExpress Localization Service to create and download a custom set of satellite assemblies, and modify resources.