logo

TreeSelect

Tree selection control.

When To Use

TreeSelect is similar to Select, but the values are provided in a tree like structure. Any data whose entries are defined in a hierarchical manner is fit to use this control. Examples of such case may include a corporate hierarchy, a directory structure, and so on.

Examples

The most basic usage.

expand code expand code

Multiple selection usage.

expand code expand code

Multiple and checkable.

expand code expand code

Customize the dropdown menu via DropdownRender.

expand code expand code

The tree structure can be populated using DataSource property. This is a quick and easy way to provide the tree content.

expand code expand code

Use CheckableExpression to dynamically set whether a node is checkable.

Note: You can also use Checkable="false" to specify that a node is uncheckable.

expand code expand code

Configure how to display the output results of checked items via ShowCheckedStrategy.

Note: It is only valid when TreeCheckable="true" and TreeCheckStrictly="false".

expand code expand code

TreeSelect API#

Property Description Type Default Value
Multiple ParameterWhether to allow multiple selections or not Boolean false unless TreeCheckable is true
TreeCheckable ParameterWhether tree nodes are able to be selected or not, which would select all leafs under that node. Boolean false
TreeCheckStrictly ParameterCheck treeNode precisely; parent treeNode and children treeNodes are not associated Boolean --
ShowCheckedStrategy ParameterSpecify how to show checked values when TreeCheckable is true and TreeCheckStrictly is false TreeCheckedStrategy --
CheckOnClickNode ParameterWhether to check the checkbox when user click the tree node. Boolean --
OnBlur ParameterCallback executed when the component looses focus Action --
TitleTemplate ParameterGet or set the template to render the title of the tree node RenderFragment<TreeNode<TItem>> --
TitleIconTemplate ParameterCustomize the icon templates RenderFragment<TreeNode<TItem>> --
Nodes ParameterNodes to render in the tree. Use either this or AntDesign.TreeSelect`2.DataSource TreeNode`1[] --
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.TreeSelect`2.ChildContent IEnumerable<TItem> --
ChildContent ParameterUse this to set the content of the tree. Use either this or AntDesign.TreeSelect`2.DataSource RenderFragment --
TreeDefaultExpandAll ParameterWhether to expand all nodes by default Boolean --
TreeDefaultExpandParent ParameterWhether to expand parent nodes by default Boolean --
TreeDefaultExpandedKeys ParameterSet the keys of the default expanded tree nodes String[] --
ExpandOnClickNode ParameterWhether to expand the parent node when clicking on a tree node Boolean --
SearchExpression ParameterFunction used to indicate if a node matches the search Func<TreeNode<TItem>, Boolean> --
OnSearch ParameterCallback executed when the user searches for a value EventCallback<String> --
MatchedStyle ParameterSet the style of the matched text String --
MatchedClass ParameterSet the class of the matched text String --
RootValue ParameterThe value of the root node String 0
DropdownMatchSelectWidth ParameterDetermine whether the dropdown menu and the select input are the same width. Default set min-width same as input. Will ignore when value less than select width. false will disable virtual scroll OneOf<Boolean, String> --
DropdownMaxWidth ParameterMaximum width of the dropdown String auto
PopupContainerMaxHeight ParameterMaximum height of the dropdown String 256px
ShowIcon Parametershow treeNode icon icon Boolean --
ShowLeafIcon ParameterWhether to show leaf icon Boolean --
TreeAttributes ParameterSet the attributes of the tree IDictionary<String, Object> --
OnNodeLoadDelayAsync ParameterCallback executed when the tree node is loaded EventCallback<TreeEventArgs<TItem>> --
OnTreeNodeSelect ParameterCallback executed when the tree node is selected EventCallback<TreeEventArgs<TItem>> --
TitleExpression ParameterSpecifies a method that returns the text of the node. Func<TreeNode<TItem>, String> --
DropdownStyle ParameterSet the style of the dropdown menu String --
ShowTreeLine ParameterWhether to show lines in the tree or not Boolean false
KeyExpression ParameterSpecifies a method that returns the key of the node. Func<TreeNode<TItem>, String> --
IconExpression ParameterSpecifies a method to return the node icon. Func<TreeNode<TItem>, String> --
IsLeafExpression ParameterSpecifies a method that returns whether the expression is a leaf node. Func<TreeNode<TItem>, Boolean> --
ChildrenExpression ParameterSpecifies a method to return the children of a node Func<TreeNode<TItem>, IEnumerable<TItem>> --
DisabledExpression ParameterSpecifies a method to return a disabled node Func<TreeNode<TItem>, Boolean> --
CheckableExpression ParameterSpecifies a method to return a checkable node Func<TreeNode<TItem>, Boolean> --
ExpandedKeys Parameter(Controlled) expands the specified tree node String[] --
Value ParameterThe selected value TItemValue --
Values ParameterThe selected values IEnumerable<TItemValue> --
BoundaryAdjustMode ParameterOverlay adjustment strategy (when for example browser resize is happening) TriggerBoundaryAdjustMode --
AllowClear ParameterShow clear button. Has no effect if AntDesign.AntInputComponentBase`1.Value type default is also in the list of SelectOption, unless used with AntDesign.SelectBase`2.ValueOnClear. Boolean --
AutoClearSearchValue ParameterWhether the current search will be cleared on selecting an item. Boolean --
Disabled ParameterWhether the Select component is disabled. Boolean --
Mode ParameterSet mode of Select - default | multiple | tags String --
EnableSearch ParameterIndicates whether the search function is active or not. Always true for mode tags. Boolean --
SearchDebounceMilliseconds ParameterDelays the processing of the search input event until the user has stopped typing for a predetermined amount of time. Default to 250ms. Int32 --
Loading ParameterShow loading indicator. You have to write the loading logic on your own. Boolean --
Open ParameterControlled open state of dropdown. Boolean --
OpenChanged ParameterCallback function that is called when open state changes. EventCallback<Boolean> --
Placeholder ParameterPlaceholder of select. String --
OnFocus ParameterCalled when focus. EventCallback --
AutoFocus ParameterAuto focus. Boolean --
SortByGroup ParameterThe name of the property to be used as a group indicator. If the value is set, the entries are displayed in groups. Use additional SortByGroup and SortByLabel. SortDirection --
SortByLabel ParameterSort items by label value. None | Ascending | Descending SortDirection --
HideSelected ParameterHides the selected items when they are selected. Boolean --
ValueChanged ParameterUsed for the two-way binding. EventCallback<TItemValue> --
ValuesChanged ParameterUsed for the two-way binding. EventCallback<IEnumerable<TItemValue>> --
SuffixIcon ParameterThe custom suffix icon. RenderFragment --
PrefixIcon ParameterThe custom prefix icon. RenderFragment --
AccessKey ParameterThe accesskey global attribute. String --
DefaultValues ParameterUsed when Mode = multiple | tags - The values are used during initialization and when pressing the Reset button within Forms. IEnumerable<TItemValue> --
OnClearSelected ParameterCalled when the user clears the selection. EventCallback --
OnSelectedItemChanged ParameterCalled when the selected item changes. EventCallback<TItem> --
OnSelectedItemsChanged ParameterCalled when the selected items changes. EventCallback<IEnumerable<TItem>> --
CustomTagLabelToValue ParameterConverts custom tag (a string) to TItemValue type. Func<String, TItemValue> --
SelectOptions ParameterUsed for rendering select options manually. RenderFragment --
MaxTagTextLength ParameterHow long (number of characters) a tag will be. Only for Mode = "multiple" or Mode = "tags" Int32 --
LabelInValue ParameterWhether to embed label in value, turn the format of value from TItemValue to string (JSON) e.g. { "value": TItemValue, "label": "Label value" } Boolean --
MaxTagCount ParameterMax tag count to show. responsive will cost render performance. OneOf<Int32, ResponsiveTag> --
ValueOnClear ParameterWhen Clear button is pressed, Value will be set to whatever is set in ValueOnClear TItemValue --
ItemLabel ParameterSpecifies the label property in the option object. If use this property, should not use AntDesign.SelectBase`2.LabelName Func<TItem, String> --
ItemValue ParameterSpecifies the value property in the option object. If use this property, should not use AntDesign.SelectBase`2.ValueName Func<TItem, TItemValue> --
LabelName ParameterThe name of the property to be used for the label. String --
ValueName ParameterThe name of the property to be used for the value. String --
OnMouseEnter ParameterCalled when mouse enter. Action --
OnMouseLeave ParameterCalled when mouse leave. Action --
PopupContainerSelector ParameterUse this to fix overlay problems e.g. #area String --
DropdownRender ParameterCustomize dropdown content. The context is the original content. RenderFragment<RenderFragment> --
LabelTemplate ParameterIs used to customize the label style. RenderFragment<TItem> --
MaxTagPlaceholder ParameterPlaceholder for hidden tags. If used with ResponsiveTag.Responsive, implement your own handling logic. RenderFragment<IEnumerable<TItem>> --
ShowSearchIcon ParameterWhether show search input in single mode. Boolean --
ShowArrowIcon Parameter Boolean --
ValidationMessages Validation messages for the FormItem String[] --
AdditionalAttributes ParameterGets or sets a collection of additional attributes that will be applied to the created element. IReadOnlyDictionary<String, Object> --
ValueExpression ParameterAn expression that identifies the bound value. Expression<Func<TItemValue>> --
ValuesExpression ParameterAn expression that identifies the enumerable of bound values. Expression<Func<IEnumerable<TItemValue>>> --
Size ParameterThe size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` String AntSizeLDSType.Default
CultureInfo ParameterWhat Culture will be used when converting string to value and value to string Useful for InputNumber component. CultureInfo CultureInfo.CurrentCulture
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
CheckAll() void Check all nodes
UncheckAll() void Uncheck all nodes
Transfer Upload
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.