logo

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.

expand code expand code

Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode.

expand code expand code

You can customize icons for different nodes.

expand code expand code

customize collapse/expand icon of tree node

expand code expand code

Use Checkable="false" to specify that a node is uncheckable.

Note: You can also use CheckableExpression to dynamically set whether a node is checkable.

expand code expand code

Controlled mode lets parent nodes reflect the status of child nodes more intelligently.

expand code expand code

To load data asynchronously when click to expand a treeNode.

expand code expand code

Tree with connected line between nodes, turn on by showLine, customize the preseted icon by switcherIcon.

expand code expand code

Built-in directory tree. multiple support ctrl(Windows) / command(Mac) selection.

expand code expand code

Use virtual list through height prop.

expand code expand code

Tree API#

Property Description Type Default Value
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> --
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 --
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
Tooltip Alert
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.