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
Virtual Scrolling TreePicker (5,000 Nodes)
Select from a massive 5,000-node organizational hierarchy with high-performance virtual scrolling.
Select node...
Selected: None
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 |
| searchtext (v-model:searchtext) | string | '' | Live search filter text with two-way binding |
| expandedNodes (v-model:expandedNodes) | Set<string | number> | (string | number)[] | undefined | Set or array of expanded node IDs with two-way binding |
| 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. |
| virtualScroll | boolean | false | Enables virtual scrolling with DOM recycling for massive hierarchies |
| itemHeight | number | 32 | Row height in pixels for each tree item in virtual mode |
| viewportHeight | number | 300 | Height in pixels of the virtual scrolling container |
| buffer | number | 5 | Number of buffer items rendered outside the viewport |
Events
Listen to KTreePicker events.
| Name | Payload | Description |
|---|---|---|
| update:modelValue | any | Emitted when selected node changes (for v-model) |
| update:isOptionsOpen | boolean | Emitted when options dropdown opens or closes |
| update:searchtext | string | Emitted when search text changes (for v-model:searchtext) |
| update:expandedNodes | (string | number)[] | Emitted when branch nodes expand or collapse (for v-model:expandedNodes) |
| change | any | Emitted when selected node changes |