TreePicker
Use the KTreePicker component to select values from hierarchical data within a dropdown combobox.
Select a node...
Selected: None
Validation States
Select state
Validation feedback on tree picker
TypeScript
// 1. Setup Tree Data Provider const provider = new CAPITreeClientDataProvider() provider.setData([...]) // 2. Use Component KTreePicker( v-model="selected" :dataProvider="provider" labelField="name" placeholder="Select..." )
Attributes
Configure the KTreePicker component using these attributes.
| Name | Type | Default | Description |
|---|---|---|---|
| label | string | '' | There will be a label. |
| dataProvider | ADataProvider | - | Required. Data provider supplying tree structured items |
| modelValue (v-model) | any | null | The currently selected node(s) |
| labelField | string | - | Required. Property from data object to use as the label |
| valueField | string | null | Optional. Property used for v-model binding (falls back to idKey) |
| idKey | string | 'id' | Unique identifier field for tree nodes |
| parentKey | string | 'parentId' | Field used to identify the parent of a node |
| iconField | string | - | Optional. Field used to display an icon next to the node label |
| placeholder | string | 'Select...' | Input placeholder text |
| searchPlaceholder | string | 'Search...' | Search input placeholder text |
| multiSelect | boolean | false | Enables selection of multiple nodes |
| searchbox | boolean | false | Shows a search input inside the dropdown |
| closeOnSelect | boolean | true | Closes the dropdown automatically when a selection is made |
| isOptionsOpen (v-model) | boolean | false | Controls the visibility of the dropdown |
| fullWidth | boolean | true | Whether the dropdown should match at least the anchor width |
| disabled | boolean | false | Disables user interaction |
| loading | boolean | false | Triggers a loading state overlay |
| validation | 'success' | 'warning' | 'error' | null | null | Semantic validation state. |
| validationText | string | '' | message to display below the picker. |