blazor-404942-components-treelist.md
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
Refer to the following list for the component API reference: DxTreeList Members.
The DevExpress Blazor TreeList supports various data binding scenarios:
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
DevExpress Blazor TreeList supports multiple data edit modes:
Inline Edit FormThe TreeList displays the edit form instead of the edited data row.Pop-Up Edit FormThe TreeList displays the edit form in a pop-up window.Inline Edit RowThe TreeList displays inline editors instead of the edited row.Cell EditingThe 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 EditingYou 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
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
The DevExpress Blazor Grid ships with the following UI elements that allow users to filter data:
Column Filter MenuThe 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 RowThe 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 BuilderThe 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 BoxUsers 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
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
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
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
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.
The DevExpress Blazor TreeList includes different column types:
Data columnObtains values from the bound data source.Command columnDisplays CRUD-related buttons ( New , Edit , and Delete ) and the Clear button that resets values in the filter row.Selection columnAllows users to select and deselect rows. This column displays checkboxes in multiple selection mode and radio buttons in single selection mode.Band ColumnAllows 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.
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.
The DevExpress Blazor TreeList allows you to display context menus with predefined and custom commands.
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
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 DataRun Demo: Export Data
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
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
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
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
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
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.