MultiSelectTreeComponent

Represents the Kendo UI for Angular MultiSelectTree component.

The MultiSelectTree lets you select multiple items from hierarchical data in a tree structure. It provides built-in filtering, checkboxes, and adaptive rendering for mobile devices.

typescript

@Component({
  selector: 'my-app',
  template: `
    <kendo-multiselecttree
      [data]="data"
      textField="text"
      valueField="value"
      [(value)]="selectedValues">
    </kendo-multiselecttree>
  `
})
export class AppComponent {
  public data = [
    { text: 'Root', value: 1, items: [
      { text: 'Child 1', value: 2 },
      { text: 'Child 2', value: 3 }
    ]}
  ];
  public selectedValues = [2, 3];
}

Selector

kendo-multiselecttree

Export Name

Accessible in templates as #kendoMultiSelectTreeInstance="kendoMultiSelectTree"

Inputs

Name	Type	Default	Description
adaptiveMode	AdaptiveMode	'none'	Controls the adaptive mode behavior of the component. Set to auto to enable automatic adaptive rendering on small screens.
adaptiveSubtitle	string		Sets the subtitle text for the ActionSheet in adaptive mode on small screens. No subtitle appears by default.
adaptiveTitle	string	''	Sets the title text for the ActionSheet in adaptive mode on small screens. Uses the component label by default if not set.
checkableSettings	MultiSelectTreeCheckableSettings	'{ checkChildren: true, checkOnClick: true }'	Configures the checkbox behavior for the MultiSelecTree nodes. Use checkableSettings to control parent-child selection relationships and click interactions.
checkAll	boolean	false	Shows a checkbox to select or deselect all visible tree nodes. Appears above the tree when checkboxes are enabled.
clearButton	boolean	true	Shows a clear button to reset all selections. Appears on hover when selections exist and the component is not disabled.
data	Object[]		Sets the hierarchical data source for the tree structure. Provide an array of objects that contain the tree data and structure.
dataItems	any[]		Sets the data items that correspond to the selected values. Required when using primitive values to resolve the full data objects.
disabled	boolean	false	Controls whether the component accepts user input. Prevents all user interactions when set to true.
fetchChildren	(node: object) => Observable<object[]>		Function that provides child nodes for a parent node. Return an Observable of child objects for the given parent.
fillMode	DropDownFillMode	'solid'	Sets the fill style for the component background and borders.
filterable	boolean	false	Enables the built-in filter input for searching tree nodes. Shows a search box above the tree when enabled.
focusableId	string		Sets the unique identifier for the focusable element. Used internally for accessibility and label association.
hasChildren	(node: object) => boolean		Determines if a tree node contains child nodes. Return true if the node has children, false otherwise.
isNodeExpanded	(item: object, index: string) => boolean		Determines if a specific node is expanded. The function is executed for each data item.
isNodeVisible	(item: object, index: string) => boolean		Determines if a tree node should be hidden.
itemDisabled	(item: object, index: string) => boolean		Determines if a tree node is disabled. The function is executed for each data item.
listHeight	number	200	Sets the maximum height of the options list in the popup. Controls vertical scrolling when content exceeds this height.
loading	boolean	false	Controls the loading state visual indicator. Shows a loading spinner when set to true.
loadOnDemand	boolean	false	Controls when child nodes load from the data source. Set to true to load children only when parent nodes expand.
placeholder	string	''	Sets the placeholder text shown when no items are selected. Helps guide users on what action to take.
popupSettings	PopupSettings		Configures the popup container settings: animation, dimensions, styling and positioning.
readonly	boolean	false	Sets the component to read-only mode. Displays current selections but prevents changes.
rounded	DropDownRounded	'medium'	Sets the border radius style of the component.
size	DropDownSize	'medium'	Sets the visual size of the component.
tabindex	number	0	Sets the tab index for keyboard navigation. Use -1 to remove the component from the tab sequence.
tagMapper	(tags: any) => any
textField	string | string[]		Specifies which data field provides the display text for tree nodes. The textField property can be set to point to a nested property value - e.g. category.name.
value	any[]		Sets the selected values in the component. Accepts primitive values if valuePrimitive is true, or objects if false.
valueDepth	number[]	[]	Sets the levels in the data set where the values can be found when valueField is an Array. The field serves to correctly allocate a data item used when the MultiSelectTree is initialized with a value.
valueField	string | string[]		Specifies which data field provides the unique values for tree nodes. The valueField property can be set to point to a nested property value - e.g. category.id.
valuePrimitive	boolean	false	Determines the data type of selected values. Set to true for primitive values, false for complex objects.

Fields

Name	Type	Default	Description
isOpen	boolean		Returns the current open state. Returns true if the popup or actionSheet is open.

Events

Name	Type	Description
close	EventEmitter<PreventableEvent>	Fires before the popup closes. Cancel this event to prevent the popup from closing.
closed	EventEmitter<any>	Fires after the popup closes completely. Use this event to perform cleanup actions when the popup becomes hidden.
filterChange	EventEmitter<string>	Fires when the filter input value changes. Use this event to implement custom filtering logic.
nodeCollapse	EventEmitter<TreeItem>	Fires when a user collapses a tree node. Use this event to respond to node collapse actions.
nodeExpand	EventEmitter<TreeItem>	Fires when a tree node is expanded. Use this event to respond to node expansion actions.
blur	EventEmitter<any>	Fires when the component gets blurred.
focus	EventEmitter<any>	Fires when the component receives focus.
open	EventEmitter<PreventableEvent>	Fires when the popup is about to open. (See example). This event is preventable. When cancelled, the popup remains closed.
opened	EventEmitter<any>	Fires after the popup opens completely. Use this event to perform actions when the popup becomes visible.
removeTag	EventEmitter<RemoveTagEvent>	Fires before a tag is removed. Cancel this event to prevent tag removal.
valueChange	EventEmitter<any>	Fires when the selected value changes. Use this event to respond to selection changes.

Methods

blur
Removes focus from the component. Call this method to programmatically blur the MultiSelectTree.

focus
Sets focus to the component. Call this method to programmatically focus the MultiSelectTree.

focusItemAt
Sets focus to a specific tree item by index. Provide the item index in format like '1_1' to focus that item. The item must be expanded and enabled to receive focus.
Parameters index string

reset
Clears all selected values from the component. This method does not trigger the valueChange event.

toggle
Opens or closes the popup programmatically. Pass true to open, false to close, or omit the parameter to toggle. This method does not trigger open or close events.
Parameters open? boolean