Ant Design Blazor
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.
Multiple selection usage.
Multiple and checkable.
Use Selectable="false" to specify that a node is unselectable.
Note: You can also use
SelectableExpressionto dynamically set whether a node is selectable.
Configure how to display the output results of checked items via ShowCheckedStrategy.
Note: It is only valid when TreeCheckable="true" and TreeCheckStrictly="false".
Multiple selection search usage.
The tree structure can be populated using DataSource property. This is a quick and easy way to provide the tree content.
Use CheckableExpression to dynamically set whether a node is checkable.
Note: You can also use
Checkable="false"to specify that a node is uncheckable.
Customize the dropdown menu via DropdownRender.
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> | -- |
| SelectableExpression | ParameterSpecifies a method to return a selectable 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 |
| SelectAll() | void | Select all nodes |
| DeselectAll() | void | Deselect all nodes |
| ExpandAll(Func<TreeNode<TItem>, Boolean> predicate, Boolean recursive) | void | Expand all nodes |
| CollapseAll(Func<TreeNode<TItem>, Boolean> predicate, Boolean recursive) | void | Collapse all nodes |
| GetNode(TItemValue key) | TreeNode<TItem> | Get TreeNode by Key |