Ant Design Blazor
TreeSelect
Examples
The most basic usage.
Multiple selection usage.
Multiple and checkable.
Customize the dropdown menu via DropdownRender.
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.
Configure how to display the output results of checked items via ShowCheckedStrategy.
Note: It is only valid when TreeCheckable="true" and TreeCheckStrictly="false".
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 |