DropDownTree

Example

<kendo-dropdowntree>
    <checkboxes />
    <hierarchical-datasource></hierarchical-datasource>
    <items></items>
    <label />
    <messages />
    <popup></popup>
    <popup-animation></popup-animation>
</kendo-dropdowntree>

ChildTags

Tag Name Details
checkboxes DropDownTreeCheckboxesSettingsTagHelper
hierarchical-datasource HierarchicalDataSourceTagHelper
items DropDownTreeItemsTagHelper
label DropDownTreeLabelSettingsTagHelper
messages DropDownTreeMessagesSettingsTagHelper
popup DropDownTreePopupSettingsTagHelper
popup-animation DropDownTreeAnimationSettingsTagHelper

Attributes

Attribute Type Description
name String Sets the name of the component.
adaptive-mode AdaptiveMode Specifies the adaptive rendering of the component.
as-child-component Boolean
auto-bind Boolean Controls whether to bind the widget to the data source on initialization.
auto-close Boolean Controls whether to close the popup when item is selected or checked.
auto-width Boolean If set to true, the widget automatically adjusts the width of the popup element and does not wrap up the item label.
bind-to IEnumerable<DropDownTreeItemModel> Binds a list of items to the DropDownTree.
check-all Boolean When this options is set to true and checkboxes are enabled, a tristate checkbox appears above the embedded treeview. Clicking that checkbox will check or uncheck all the loaded enabled items of the treeview.
check-all-template String The template used to render the checkAll label. By default, the widget displays only a span element with text "Check all".
check-all-template-handler String The template used to render the checkAll label. By default, the widget displays only a span element with text "Check all".
check-all-template-id String The template used to render the checkAll label. By default, the widget displays only a span element with text "Check all".
check-all-template-view IHtmlContent The template used to render the checkAll label. By default, the widget displays only a span element with text "Check all".
clear-button Boolean Unless this option is set to false, a button will appear when hovering the widget. Clicking that button will reset the widget's value and will trigger the change event.
data-image-url-field String Sets the field of the data item that provides the image URL of the DropDownTree nodes.
data-source-id String The Id of the data source.
data-sprite-css-class-field String Sets the field of the data item that provides the sprite CSS class of the nodes. If 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 The field of the data item that provides the text content of the list items. The widget will filter the data source based on this field.
data-url-field String Sets the field of the data item that provides the link URL of the nodes.
data-value-field String The field of the data item that provides the value of the widget.
delay Double Specifies the delay in milliseconds after which the DropDownTree will start filtering dataSource.
enable Boolean If set to false the widget will be disabled and will not allow user input. The widget is enabled by default and allows user input.
enforce-min-length Boolean If set to true the widget will not show all items when the text of the search input cleared. By default, the widget shows all items when the text of the search input is cleared. Works in conjunction with minLength.
fill-mode FillMode Sets a value controlling how the color is applied.
filter FilterType When filtering is enabled, allows aria-label to be defined for the filter input element.
filter-label String When filtering is enabled, allows aria-label to be defined for the filter input element.
footer-template String The template used to render the footer template. The footer template receives the widget itself as a part of the data argument. Use the widget fields directly in the template.
footer-template-handler String The template used to render the footer template. The footer template receives the widget itself as a part of the data argument. Use the widget fields directly in the template.
deferred Boolean Suppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
is-in-client-template Boolean When placing a Tag Helper within a Kendo Template, set the type to text/html and add the is-in-client-template="true" attribute.
footer-template-id String The template used to render the footer template. The footer template receives the widget itself as a part of the data argument. Use the widget fields directly in the template.
footer-template-view IHtmlContent The template used to render the footer template. The footer template receives the widget itself as a part of the data argument. Use the widget fields directly in the template.
for ModelExpression An expression to be evaluated against the current model.
has-client-component Boolean
header-template String Specifies a static HTML content, which will be rendered as a header of the popup element.
header-template-handler String Specifies a static HTML content, which will be rendered as a header of the popup element.
header-template-id String Specifies a static HTML content, which will be rendered as a header of the popup element.
header-template-view IHtmlContent Specifies a static HTML content, which will be rendered as a header of the popup element.
height String Sets max-height of the embedded treeview in pixels. The default value is 200 pixels. If set to "Auto" the height of the popup will depend on the height of the treeview.
ignore-case Boolean If set to false case-sensitive search will be performed to find suggestions. The widget performs case-insensitive searching by default.
load-on-demand Boolean Indicates whether the child DataSources should be fetched lazily when parent groups get expanded. Setting this to true causes loading the child DataSources when expanding the parent node.
min-length Double The minimum number of characters the user must type before a search is performed. Set to a higher value if the search could match a lot of items.
no-data-template String The template used to render the "no data" template, which will be displayed if no results are found or the underlying data source is empty. The noData template receives the widget itself as a part of the data argument. The template will be evaluated on every widget data bound.
no-data-template-handler String The template used to render the "no data" template, which will be displayed if no results are found or the underlying data source is empty. The noData template receives the widget itself as a part of the data argument. The template will be evaluated on every widget data bound.
no-data-template-id String The template used to render the "no data" template, which will be displayed if no results are found or the underlying data source is empty. The noData template receives the widget itself as a part of the data argument. The template will be evaluated on every widget data bound.
no-data-template-view IHtmlContent The template used to render the "no data" template, which will be displayed if no results are found or the underlying data source is empty. The noData template receives the widget itself as a part of the data argument. The template will be evaluated on every widget data bound.
on-change String Fired when the value of the widget is changed by the user.The event handler function context (available via the this keyword) will be set to the widget instance.
on-close String Fired when the popup of the widget is closed.The event handler function context (available via the this keyword) will be set to the widget instance.
on-data-bound String Fired when the widget or sub levels of its items are bound to data from the dataSource.The event handler function context (available via the this keyword) will be set to the widget instance.
on-filtering String Fired when the widget is about to filter the data source.The event handler function context (available via the this keyword) will be set to the widget instance.
on-open String Fired when the popup of the widget is opened by the user.The event handler function context (available via the this keyword) will be set to the widget instance.
on-select String Triggered when a node is being selected by the user. Cancellable. When checkboxes are enabled, it is also triggered when a node is being deselected.
placeholder String The hint displayed by the widget when it is empty. Not set by default.
rounded Rounded Sets a value controlling the border radius.
sanitize-id Boolean
size ComponentSize Sets the size of the component.
tag-mode DropDownTreeTagMode Represents available tag modes of DropDownTree.
template String Template for rendering each node.
template-handler String Template for rendering each node.
template-id String Template for rendering each node.
template-view IHtmlContent Template for rendering each node.
text String The text of the widget used when the autoBind is set to false.
value Object Define the value of the widget. It accepts 'String' when it is in single selection mode and 'Array' when multiple selection is enabled via checkboxes property.
value-primitive Boolean Specifies the value binding behavior for the widget. If set to true, the View-Model field will be updated with the selected item value field. If set to false, the View-Model field will be updated with the selected item.
value-template String The template used to render the value and the or the selected tags.
value-template-handler String The template used to render the value and the or the selected tags.
value-template-id String The template used to render the value and the or the selected tags.
value-template-view IHtmlContent The template used to render the value and the or the selected tags.
In this article
Not finding the help you need?