DropDownTree

Directive

kendo-dropdowntree

Props

animation Boolean | Object

Configures the opening and closing animations of the suggestion popup (animation in Kendo UI for jQuery). Setting the animation option to false disables the opening and closing animations. As a result, the suggestion popup will open and close instantly. The supported composite props are available in AnimationProps.

auto-bind Boolean

Defines whether to bind the widget to the data source upon its initialization (autoBind in Kendo UI for jQuery).

auto-close Boolean

Defines whether to close the popup when the user selects or checks an item (autoClose in Kendo UI for jQuery).

auto-width Boolean

If auto-width is set to true, the DropDownTree automatically adjusts the width of the popup element and does not wrap up the item label (autoWidth in Kendo UI for jQuery).

check-all Boolean

If check-all is set to true and the checkboxes are enabled, a tri-state checkbox appears above the embedded tree-view (checkAll in Kendo UI for jQuery). Clicking the checkbox checks or unchecks all enabled items of the tree-view that are loaded.

check-all-template String | Function

The template for rendering the checkAll label (checkAllTemplate in Kendo UI for jQuery). By default, the widget displays only a span element with Check all text in it.

checkboxes Boolean | Object

If checkboxes is set to true or is an object, the DropDownTree renders the checkboxes next to each node (checkboxes in Kendo UI for jQuery). The supported composite props are available in CheckboxesProps.

clear-button Boolean

If clear-button is set to true, the DropDownTree renders a button on hover over the widget (clearButton in Kendo UI for jQuery). Clicking that button resets the value of the DropDownTree and triggers the change event.

data-image-url-field String

Sets the field of the data item that provides the image URL of the DropDownTree nodes (dataImageUrlField in Kendo UI for jQuery).

data-source Object | Array

The data source of the DropDownTree which is used to render the nodes (dataSource in Kendo UI for jQuery).

The supported values are:

• A JavaScript object which represents any valid data source configuration.
• A JavaScript array.
• An existing kendo.data.HierarchicalDataSource instance.

If the dataSource option is set to a JavaScript object or an array, the DropDownTree initializes a new kendo.data.HierarchicalDataSource instance by using that value as the data source configuration. If the dataSource option is an existing kendo.data.HierarchicalDataSource instance, the DropDownTree uses that instance and will not initialize a new one.

data-sprite-css-class-field String

The field of the data item that provides the sprite CSS class of the nodes (dataSpriteCssClassField in Kendo UI for jQuery). If data-sprite-css-class-field is an array, each level uses the field that is at the same index in the array or the last item in the array.

data-text-field String | Array

The field of the data item which provides the text content of the nodes (dataTextField in Kendo UI for jQuery). If data-text-field is an array, each level uses the field that is at the same index in the array or the last item in the array.

data-url-field String

The field of the data item that provides the link URL of the nodes (dataUrlField in Kendo UI for jQuery).

data-value-field String | Array

The field of the data item that provides the value of the widget (dataValueField in Kendo UI for jQuery). f data-value-field is an array, each level uses the field that is at the same index in the array or the last item in the array.

delay Number

The delay (in milliseconds) after which the DropDownTree starts filtering its data source (delay in Kendo UI for jQuery).

enable Boolean

If enable is set to false, the DropDownTree will be disabled and will prevent user input (enable in Kendo UI for jQuery). By default, the DropDownTree is enabled and allows user input.

enforce-min-length Boolean

If enforce-min-length is set to true, the DropDownTree will hide part of its items when the text of the search input is cleared (enforceMinLength in Kendo UI for jQuery). By default, the DropDownTree shows all items when the text of the search input is cleared. Works together with minLength.

filter String

Determines the suggestions for the current value (filter in Kendo UI for jQuery). By default, filtering is disabled and can be performed over string values only—the data has to be an array of strings or configured in the dataTextField option.

The supported filter values are:

• startswith
• endswith
• contains

footer-template String | Function

The template for rendering the footer template (footerTemplate in Kendo UI for jQuery). Receives the DropDownTree itself as part of the data argument. The fields of the DropDownTree have to be used directly in the template.

height String | Number

The maximum height (in pixels) of the embedded tree-view (height in Kendo UI for jQuery). Defaults to 200px. If height is set to auto, the height of the popup will depend on the height of the tree-view.

ignore-case Boolean

If ignore-case is set to false, the performed search for finding suggestions will be case-sensitive (ignoreCase in Kendo UI for jQuery). By default, the DropDownTree performs case-insensitive search.

load-on-demand Boolean

Indicates whether the child data sources will be fetched lazily when parent groups are expanded (loadOnDemand in Kendo UI for jQuery). Setting load-on-demand to true results in loading of the child data sources when the parent node expands.

messages Object

The text messages which are displayed in the widget and which are used for customizing and localizing the messages (messages in Kendo UI for jQuery). The supported composite props are available in VirtualProps.

min-length Number

The minimum number of characters which the user must type before a search is performed (minLength in Kendo UI for jQuery). If you set min-length to a value higher than one, the search might match too many items.

no-data-template String | Function

The template for rendering the no-data template which is displayed if no results are found or if the underlying data source is empty (noDataTemplate in Kendo UI for jQuery). The no-data template receives the widget itself as part of the data argument. The template will be evaluated each time databound is triggered.

placeholder String

The hint which is displayed when the widget is empty (placeholder in Kendo UI for jQuery). By default, placeholder is not set.

popup Object

The options for initializing the popup (popup in Kendo UI for jQuery). The supported composite props are available in PopupProps.

header-template String | Function

Specifies static HTML content which will be rendered as a header of the popup element (headerTemplate in Kendo UI for jQuery).

value-template String | Function

The template for rendering the value or the selected tags (valueTemplate in Kendo UI for jQuery).

tag-mode String

The mode for rendering the selected tags when the checkboxes are enabled (tagMode in Kendo UI for jQuery).

The supported modes are:

• multiple—Renders a tag for every selected value.
• single—Renders only one tag that shows the number of the selected values.

template String | Function

The template for rendering each node (template in Kendo UI for jQuery).

text String

The text of the widget which is used when autoBind is set to false (text in Kendo UI for jQuery).

value String | Array

The value of the widget (value in Kendo UI for jQuery).

• When the DropDownTree is in the single selection mode, value accepts string values.
• When the DropDownTree is in the multiple selection mode that is enabled over the checkboxes property, value accepts an array.

value-primitive Boolean

Specifies the value-binding behavior for the widget (valuePrimitive in Kendo UI for jQuery).

• If value-primitive is set to true, the View-Model field is updated with the selected item text field.
• If value-primitive is set to false, the View-Model field is updated with the selected item.

Events

change: Function

Fires when the user changes the value of the widget (change in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the DropDownTree instance.

close: Function

Fires when the user closes the suggestion popup of the widget (close in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the DropDownTree instance.

databound: Function

Fires when the widget is bound to data from its data source (dataBound in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the DropDownTree instance.

filtering: Function

Fires when the widget is about to filter the data source (filtering in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the DropDownTree instance.

open: Function

Fires when the user opens the popup of the widget (open in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the DropDownTree instance.

select: Function

Fires when the user selects a node (select in Kendo UI for jQuery). The event can be cancelled.

Methods

For more details about the methods available in the component's API please check its Kendo UI for jQuery API documentation.

kendoWidget

returns

Returns the Kendo UI DropDownTree instance.