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

DropDownTreeComponent

Represents the Kendo UI DropDownTree component for Angular.

Selector

kendo-dropdowntree

Export Name

Accessible in templates as #kendoDropDownTreeInstance="kendoDropDownTree"

Inputs

clearButton

boolean

If set to true, renders a button on hovering over the component. Clicking this button resets the value of the component to undefined and triggers the change event.

disabled

boolean

Sets the disabled state of the component.

isNodeExpanded

(item: object, index: string) => boolean

A function that is executed for each data item and determines if a specific node is expanded.

listHeight

number

Sets the height of the options list. By default, listHeight is 200px.

The listHeight property affects only the list of options and not the whole popup container. To set the height of the popup container, use popupSettings.height.

loading

boolean

Sets and gets the loading state of the DropDownTree.

placeholder

string

The hint which is displayed when the component is empty.

readonly

boolean

Sets the read-only state of the component.

textField

string | string[]

The fields of the data item that provide the text content of the nodes inside the DropDownTree (see example). If the textField input is set to an array, each hierarchical level uses the field that corresponds to the same index in the array, or the last item in the array.

valueDepth

number

Sets the level in the data set where the value can be found when valueField is an Array. The field serves to correctly allocate a data item used when the DropDownTree is initialized with a value.

valueField

string | string[]

The fields of the data item that provide the value of the nodes inside the DropDownTree (see example). If the valueField input is set to an array, each hierarchical level uses the field that corresponds to the same index in the array, or the last item in the array.

valuePrimitive

boolean

Specifies the type of the selected value (more information and example). If set to true, the selected value has to be of a primitive value.

data

Object[]

Sets the data of the DropDownTree.

The data has to be provided in an array-like list with objects.

dataItem

Object

Keeps the current dataItem object in order to resolve selection. Needs to be provided when value is bound in and valuePrimitive is set to true.

popupSettings

PopupSettings

Configures the popup of the DropDownTree.

The available options are:

  • animate: BooleanControls the popup animation. By default, the open and close animations are enabled.
  • width: Number | StringSets the width of the popup container. By default, the width of the host element is used. If set to auto, the component automatically adjusts the width of the popup and no item labels are wrapped.
  • height: NumberSets the height of the popup container.
  • popupClass: StringSpecifies a list of CSS classes that are used to style the popup.
  • appendTo: "root" | "component" | ViewContainerRefSpecifies the component to which the popup will be appended.

tabindex

number

Specifies the tabindex of the component.

value

any

Sets the value of the DropDownTree. It can either be of the primitive (string, numbers) or of the complex (objects) type. To define the type, use the valuePrimitive option.

fetchChildren

() => Observable<any[]>

A function which provides the child nodes for a given parent node.

hasChildren

() => false

A function which determines if a specific node has child nodes.

itemDisabled

() => false

A function that is executed for each data item and determines if a specific item is disabled.

Fields

isOpen

boolean

Returns the current open state of the popup.

Events

close

EventEmitter<PreventableEvent>

Fires each time the popup is about to close (see example). This event is preventable. If you cancel it, the popup will remain open.

closed

EventEmitter<any>

Fires after the popup has been closed.

nodeCollapse

EventEmitter<TreeItem>

Fires when the user collapses a node in the popup TreeView.

nodeExpand

EventEmitter<TreeItem>

Fires when the user expands a node in the popup TreeView.

blur

EventEmitter<any>

Fires each time the DropDownTree gets blurred.

focus

EventEmitter<any>

Fires each time the user focuses the DropDownTree.

open

EventEmitter<PreventableEvent>

Fires each time the popup is about to open (see example). This event is preventable. If you cancel it, the popup will remain closed.

opened

EventEmitter<any>

Fires after the popup has been opened.

valueChange

EventEmitter<any>

Fires each time the value is changed (see example).

Methods

focus

Focuses the DropDownTree.

toggle

Toggles the visibility of the popup (see example). If you use the toggle method to open or close the popup, the open and close events will not be fired.

Parameters

open?

boolean

The state of the popup.