Ant Design Blazor
Tree
A hierarchical list structure component.
When To Use
Almost anything can be represented in a tree structure. Examples include directories, organization hierarchies, biological classifications, countries, etc. The Tree component is a way of representing the hierarchical relationship between these things. You can also expand, collapse, and select a treeNode within a Tree.
Examples
The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.
Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode.
Searchable Tree.
You also can use SearchExpression to customize the matching rules. And also can specify HideUnmatched to only show the nodes that matched the search value (and their direct parents).
You can customize icons for different nodes.
customize collapse/expand icon of tree node
Use Checkable="false" to specify that a node is uncheckable.
Note: You can also use
CheckableExpressionto dynamically set whether a node is checkable.
Controlled mode lets parent nodes reflect the status of child nodes more intelligently.
To load data asynchronously when click to expand a treeNode.
Tree with connected line between nodes, turn on by showLine, customize the preseted icon by switcherIcon.
Built-in directory tree. multiple support ctrl(Windows) / command(Mac) selection.
Use virtual list through height prop.
Use SelectableExpression to dynamically set whether a node is selectable.
Note: You can also use
Selectable="false"to specify that a node is unselectable.
Tree API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| AllNodes | Readonly collection of all nodes | IReadOnlyCollection<TreeNode<TItem>> | -- |
| ShowExpand | ParameterShows an expansion icon before the node | Boolean | -- |
| ShowLine | ParameterShows a connecting line | Boolean | -- |
| ShowIcon | Parametershow treeNode icon icon | Boolean | -- |
| BlockNode | ParameterWhether treeNode fill remaining horizontal space | Boolean | -- |
| Draggable | ParameterWhether the node allows drag and drop | Boolean | -- |
| Disabled | ParameterThe tree is disabled | Boolean | -- |
| ShowLeafIcon | ParameterDisplays the cotyledon icon | Boolean | -- |
| SwitcherIcon | ParameterSpecific the Icon type of switcher | String | -- |
| Nodes | ParameterNodes for the tree. Use either this, AntDesign.Tree`1.DataSource, or AntDesign.Tree`1.ChildContent |
RenderFragment | -- |
| ChildContent | ParameterNodes for the tree. Use either this, AntDesign.Tree`1.DataSource, or AntDesign.Tree`1.Nodes |
RenderFragment | -- |
| Selectable | ParameterWhether can be selected | Boolean | -- |
| Multiple | ParameterAllows selecting multiple treeNodes | Boolean | -- |
| DefaultSelectedKeys | Parameter | String[] | -- |
| DefaultSelectedKey | Parameter | String | -- |
| SelectedKey | Parameter@bind-SelectedKey | String | -- |
| SelectedKeyChanged | Parameter@bind-SelectedKeys | EventCallback<String> | -- |
| SelectedNode | Parameter@bind-SelectedNode | TreeNode<TItem> | -- |
| SelectedNodeChanged | Parameter@bind-SelectedNode | EventCallback<TreeNode<TItem>> | -- |
| SelectedData | Parameter@bing-SelectedData | TItem | -- |
| SelectedDataChanged | Parameter@bind-SelectedData | EventCallback<TItem> | -- |
| SelectedKeys | ParameterThe selected keys | String[] | -- |
| SelectedKeysChanged | Parameter@bind-SelectedKeys | EventCallback<String[]> | -- |
| SelectedNodes | ParameterThe collection of selected nodes | TreeNode`1[] | -- |
| SelectedNodesChanged | Parameter@bind-SelectedNodes | EventCallback<TreeNode`1[]> | -- |
| SelectedDatas | ParameterThe selected data set | TItem[] | -- |
| SelectedDatasChanged | Parameter@bind-SelectedDatas | EventCallback<TItem[]> | -- |
| Checkable | ParameterAdd a Checkbox before the node | Boolean | -- |
| CheckOnClickNode | ParameterCheck or uncheck the node by click TreeNodeTitle if checkable | Boolean | -- |
| CheckStrictly | ParameterCheck treeNode precisely; parent treeNode and children treeNodes are not associated | Boolean | -- |
| CheckedKeys | ParameterChecked keys | String[] | -- |
| CheckedKeysChanged | Parameter@bind-CheckedKeys | EventCallback<String[]> | -- |
| DefaultCheckedKeys | ParameterSpecifies the keys of the default checked treeNodes | String[] | -- |
| DisableCheckKeys | Disable node Checkbox | String[] | -- |
| SearchValue | Parametersearch value | String | -- |
| SearchExpression | Parameter | Func<TreeNode<TItem>, Boolean> | -- |
| MatchedStyle | ParameterStyle for the piece of a node that matches search | String | -- |
| MatchedClass | ParameterClass name for the piece of a node that matches search | String | -- |
| HideUnmatched | Parameter | Boolean | -- |
| DataSource | ParameterDatasource for the tree. Can be a list of any custom object type by providing the expressions to get children, leafs, titles, etc. Use either this or AntDesign.Tree`1.ChildContent Use either this, AntDesign.Tree`1.Nodes, or AntDesign.Tree`1.ChildContent |
IEnumerable<TItem> | -- |
| TitleExpression | Parameter | Func<TreeNode<TItem>, String> | -- |
| KeyExpression | Parameter | Func<TreeNode<TItem>, String> | -- |
| IconExpression | Parameter | Func<TreeNode<TItem>, String> | -- |
| IsLeafExpression | Parameter | Func<TreeNode<TItem>, Boolean> | -- |
| ChildrenExpression | Parameter | Func<TreeNode<TItem>, IEnumerable<TItem>> | -- |
| DisabledExpression | Parameter | Func<TreeNode<TItem>, Boolean> | -- |
| CheckableExpression | ParameterSpecifies a method to return a checkable node | Func<TreeNode<TItem>, Boolean> | -- |
| SelectableExpression | ParameterSpecifies a method to return a selectable node | Func<TreeNode<TItem>, Boolean> | -- |
| OnNodeLoadDelayAsync | ParameterLazy load callbacks | EventCallback<TreeEventArgs<TItem>> | -- |
| OnClick | ParameterClick the tree node callback | EventCallback<TreeEventArgs<TItem>> | -- |
| OnDblClick | ParameterDouble-click the node callback | EventCallback<TreeEventArgs<TItem>> | -- |
| OnContextMenu | ParameterRight-click tree node callback | EventCallback<TreeEventArgs<TItem>> | -- |
| OnCheck | Parameterchecked the tree node callback | EventCallback<TreeEventArgs<TItem>> | -- |
| OnSelect | Parameter | EventCallback<TreeEventArgs<TItem>> | -- |
| OnUnselect | Parameter | EventCallback<TreeEventArgs<TItem>> | -- |
| OnExpandChanged | ParameterClick the expansion tree node icon to call back | EventCallback<TreeEventArgs<TItem>> | -- |
| IndentTemplate | ParameterThe indentation template | RenderFragment<TreeNode<TItem>> | -- |
| TitleTemplate | ParameterCustomize the header template | RenderFragment<TreeNode<TItem>> | -- |
| TitleIconTemplate | ParameterCustomize the icon templates | RenderFragment<TreeNode<TItem>> | -- |
| SwitcherIconTemplate | ParameterCustomize toggle icon templates | RenderFragment<TreeNode<TItem>> | -- |
| OnDragStart | ParameterCalled when the drag and drop begins | EventCallback<TreeEventArgs<TItem>> | -- |
| OnDragEnter | ParameterCalled when drag and drop into a releasable target | EventCallback<TreeEventArgs<TItem>> | -- |
| OnDragLeave | ParameterCalled when drag and drop away from a releasable target | EventCallback<TreeEventArgs<TItem>> | -- |
| OnDrop | ParameterTriggered when drag-and-drop drops succeed | EventCallback<TreeEventArgs<TItem>> | -- |
| OnDragEnd | ParameterDrag-and-drop end callback | EventCallback<TreeEventArgs<TItem>> | -- |
| ExpandOnClickNode | ParameterExpand or collapse the node by click TreeNodeTitle | Boolean | -- |
| DefaultExpandAll | ParameterWhether to default to all nodes expanded or not | Boolean | false |
| DefaultExpandParent | ParameterThe parent node is expanded by default | Boolean | -- |
| DefaultExpandedKeys | ParameterExpand the specified tree node by default | String[] | -- |
| ExpandedKeys | Parameter(Controlled) expands the specified tree node | String[] | -- |
| ExpandedKeysChanged | Parameter | EventCallback<String[]> | -- |
| OnExpand | Parameter | EventCallback<ValueTuple<String[], TreeNode<TItem>, Boolean>> | -- |
| AutoExpandParent | Parameter | Boolean | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| SelectAll() | void | Select all nodes |
| DeselectAll() | void | Deselect all nodes |
| CheckAll() | void | |
| UncheckAll() | void | Unchecks all nodes |
| GetNode(String key) | TreeNode<TItem> | Get TreeNode from Key |
| FindFirstOrDefaultNode(Func<TreeNode<TItem>, Boolean> predicate, Boolean recursive) | TreeNode<TItem> | Find Node |
| ExpandAll(Func<TreeNode<TItem>, Boolean> predicate, Boolean recursive) | void | Expand all nodes |
| CollapseAll(Func<TreeNode<TItem>, Boolean> predicate, Boolean recursive) | void | Collapse all nodes |
TreeNode API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Nodes | Parameter | RenderFragment | -- |
| ChildContent | Parameter | RenderFragment | -- |
| TreeLevel | Current Node Level | Int32 | -- |
| Key | ParameterSpecifies the unique identifier name of the current node。 | String | -- |
| Disabled | ParameterThe disabled state is subject to the parent node | Boolean | -- |
| Selected | ParameterSelected or not | Boolean | -- |
| SelectedChanged | ParameterTriggered when the selected state changes | EventCallback<Boolean> | -- |
| Loading | ParameterWhether the load state is asynchronous (affects the display of the expansion icon) | Boolean | -- |
| IsLeaf | ParameterWhether it is a leaf node | Boolean | -- |
| Expanded | ParameterExpand the node or not | Boolean | -- |
| ExpandedChanged | Parameter | EventCallback<Boolean> | -- |
| Checked | ParameterCheck the TreeNode or not | Boolean | -- |
| CheckedChanged | Parameter | EventCallback<Boolean> | -- |
| Checkable | Parameter | Boolean | -- |
| Selectable | Parameter | Boolean | -- |
| DisableCheckbox | ParameterDisable checkbox | Boolean | -- |
| Draggable | ParameterWhether the node is draggable | Boolean | -- |
| Icon | ParameterThe icon in front of the node | String | -- |
| IconTemplate | ParameterCustomize the icon template | RenderFragment<TreeNode<TItem>> | -- |
| SwitcherIcon | ParameterSpecific the icon of the switcher | String | -- |
| SwitcherIconTemplate | ParameterCustomize the switcher icon template | RenderFragment<TreeNode<TItem>> | -- |
| Title | ParameterThe title of the node | String | -- |
| TitleTemplate | ParameterCustomize the title template | RenderFragment | -- |
| DataItem | ParameterThe data of the node, it's the data item in the data source | TItem | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| FindFirstOrDefaultNode(Func<TreeNode<TItem>, Boolean> predicate, Boolean recursive) | TreeNode<TItem> | |
| GetSiblingNodes() | List<TreeNode<TItem>> | Get the sibling nodes |
| GetPreviousNode() | TreeNode<TItem> | Get the previous node |
| GetNextNode() | TreeNode<TItem> | Get the next node |
| SetSelected(Boolean value) | void | Setting Selection State |
| Expand(Boolean expanded) | Task | Expand the node |
| SetChecked(Boolean check) | void | Set the checkbox state |
| CheckAllChildren() | void | Checks all child nodes |
| UnCheckAllChildren() | void | Unchecks all child nodes |