Blazor TreeList (CTP)
- 5 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, navigate, and shape hierarchical data.
Important
The TreeList component is currently available as a community technology preview (CTP).
Data Binding
The DevExpress Blazor TreeList supports various data binding scenarios:
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.
Filter Data
The DevExpress Blazor TreeList ships with the following elements that allow users to filter data.
Filter Row
The filter row displays in-place editors where users can type filter values. You can also manage filter options in code.
Filter in Code
The DevExpress Blazor TreeList allows you to filter its data in code. To apply filter criteria, create a criteria operator object that specifies the filter expression and send this object to one of the following methods:
- SetFilterCriteria
- Applies a filter to TreeList data.
- SetFieldFilterCriteria
- Applies a filter to the specified data field.
These methods allow you to filter TreeList data by every data source field, including fields that are not displayed in the TreeList. When a filter is applied, the TreeList raises the FilterCriteriaChanged event.
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, custom logic can also be used to calculate summary values.
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.
Focus
Set the FocusedRowEnabled property to true to display the focused row in the TreeList. Users can click a row to focus it. You can call the SetFocusedRowIndex(Int32) method to move focus in code. When the focused row changes, the component raises the FocusedRowChanged event.
Templates
Use templates to customize content and appearance of different TreeList elements:
Element | Property |
|---|---|
Cell | TreeList.DataColumnCellDisplayTemplate |
Column Header | TreeList.ColumnHeaderCaptionTemplate |
Empty Data Area | |
Filter Row Cell | TreeList.DataColumnFilterRowCellTemplate |
Toolbar |
Templates implement a context parameter that contains element-related data and a reference to the TreeList component, so you can access its API.
Columns
The DevExpress Blazor TreeList includes different column types:
- Data column
- Obtains values from the bound data source.
- 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.
Column Reorder
Users can reorder TreeList columns at runtime. The TreeList also supports the Column Chooser that allows users to manage column visibility and position. You can prevent users from reordering columns.
Column Resize
Users can resize columns at runtime. You can also call the AutoFitColumnWidths method to adjust column widths to their content.
Fixed Columns
The TreeList allows you to anchor columns to the TreeList’s left or rightmost edge. The anchored columns remain visible when a user scrolls the TreeList horizontally. Users can display and hide fixed columns or change their order and size. However, users cannot move regular columns to a fixed column zone and vice versa.
Set a column’s FixedPosition property to Left or Right to freeze the column.
Toolbar
You can use the ToolbarTemplate property to add a toolbar at the top edge of a TreeList component. Implement required commands and thus make them immediately available to users. The embedded toolbar automatically synchronizes its layout and styles with the TreeList component.
Appearance
Handle the CustomizeElement event to customize the appearance of most TreeList UI elements based on custom conditions.
Size Mode
Specify the SizeMode property to display TreeList elements (for instance, text size and row height) and other built-in TreeList components (for instance, pager and buttons) in small, medium, or large predefined size.
Paging and Scrolling
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.
Scrolling
The DevExpress Blazor TreeList ships with a built-in scrollbar. The scrollbar appears automatically if content does not fit the component container.
Virtual Scrolling
Set the VirtualScrollingEnabled property to true to enable virtual scrolling in the TreeList. In this mode, the TreeList hides the pager, lists all data rows on one page and displays the vertical scrollbar for navigation. To optimize performance, our TreeList only renders rows that appear in the component viewport.
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.