New to Kendo UI for AngularStart a free 30-day trial

Templates

The DropDownTree provides templates which enable you to customize the content of its drop-down list items.

Item Template

To customize the content of the list items, use an item template. To define an item template, nest an <ng-template> tag with the kendoDropDownTreeNodeTemplate directive inside a <kendo-dropdowntree> tag.

Use the let-dataItem directive to access the template context that is established based on the current data item displayed in the component list.

Change Theme
Theme
Loading ...

Value Template

To customize the content of the element which holds the selected text, use the value template. To define a value template, nest an <ng-template> tag with a kendoDropDownTreeValueTemplate directive inside a <kendo-dropdownlist> tag.

The template context is set to the current DropDownTree component. To get a reference to the current data item, use the let-dataItem directive.

Change Theme
Theme
Loading ...

Header Template

To customize the header element of the drop-down list, use a header template. To define a header template, nest an <ng-template> tag with a kendoDropDownTreeHeaderTemplate directive inside a <kendo-dropdowntree> tag.

The template context is set to the current DropDownTree component.

Change Theme
Theme
Loading ...

To customize the footer element of the drop-down list, use a footer template. To define a footer template, nest an <ng-template> tag with a kendoDropDownTreeFooterTemplate directive inside a <kendo-dropdowntree> tag.

The template context is set to the current DropDownTree component.

Change Theme
Theme
Loading ...

No-Data Template

To customize the content of the drop-down list when no data is available, use a no-data template. To define a no-data template, nest an <ng-template> tag with a kendoDropDownTreeNoDataTemplate directive inside a <kendo-dropdowntree> tag.

Change Theme
Theme
Loading ...