New to Kendo UI for Angular? Start a free 30-day trial

MultiSelectTreeComponent

Component

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.

Definition

Package:@progress/kendo-angular-dropdowns

Selector:kendo-multiselecttree

Export Name:Accessible in templates as #kendoMultiSelectTreeInstance="kendoMultiSelectTree"

Syntax:

@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];
}

Inputs

adaptiveMode

AdaptiveMode

Controls the adaptive mode behavior of the component. Set to auto to enable automatic adaptive rendering on small screens.

Default:

'none'

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.

Default:

checkableSettings

MultiSelectTreeCheckableSettings

Configures the checkbox behavior for the MultiSelecTree nodes. Use checkableSettings to control parent-child selection relationships and click interactions.

Default:

'{ checkChildren: true, checkOnClick: true }'

checkAll

boolean

Shows a checkbox to select or deselect all visible tree nodes. Appears above the tree when checkboxes are enabled.

Default:

false

clearButton

boolean

Shows a clear button to reset all selections. Appears on hover when selections exist and the component is not disabled.

Default:

true

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

Controls whether the component accepts user input. Prevents all user interactions when set to true.

Default:

false

fetchChildren

Function that provides child nodes for a parent node. Return an Observable of child objects for the given parent.

Parameters:nodeobjectReturns:

Observable<object[]>

Default:

fetchChildren

fillMode

DropDownFillMode

Sets the fill style for the component background and borders. The default value is set by the Kendo theme.

filterable

boolean

Enables the built-in filter input for searching tree nodes. Shows a search box above the tree when enabled.

Default:

false

focusableId

string

Sets the unique identifier for the focusable element. Used internally for accessibility and label association.

hasChildren

Determines if a tree node contains child nodes. Return true if the node has children, false otherwise.

Parameters:nodeobjectReturns:

boolean

Default:

hasChildren

isNodeExpanded

Determines if a specific node is expanded. The function is executed for each data item.

Parameters:itemobjectindexstringReturns:

boolean

isNodeVisible

Determines if a tree node should be hidden.

Parameters:itemobjectindexstringReturns:

boolean

Default:

isNodeVisible

itemDisabled

Determines if a tree node is disabled. The function is executed for each data item.

Parameters:itemobjectindexstringReturns:

boolean

Default:

itemDisabled

listHeight

number

Sets the maximum height of the options list in the popup. Controls vertical scrolling when content exceeds this height.

Default:

200

loading

boolean

Controls the loading state visual indicator. Shows a loading spinner when set to true.

Default:

false

loadOnDemand

boolean

Controls when child nodes load from the data source. Set to true to load children only when parent nodes expand.

Default:

false

placeholder

string

Sets the placeholder text shown when no items are selected. Helps guide users on what action to take.

Default:

popupSettings

PopupSettings

Configures the popup container settings: animation, dimensions, styling and positioning.

readonly

boolean

Sets the component to read-only mode. Displays current selections but prevents changes.

Default:

false

rounded

DropDownRounded

Sets the border radius style of the component. The default value is set by the Kendo theme.

size

DropDownSize

Sets the visual size of the component. The default value is set by the Kendo theme.

tabindex

number

Sets the tab index for keyboard navigation. Use -1 to remove the component from the tab sequence.

Default:

tagMapper

Parameters:tagsanyReturns:

any

The tags that will be rendered by the component.

Transforms the provided array of data items into an array of tags.

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.

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.

Default:

[]

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

Determines the data type of selected values. Set to true for primitive values, false for complex objects.

Default:

false