DropDownButton Customization
The DropDownButton provides options for setting the behavior of its popup and popup items. The popup displays the items from the data input. For details on binding primitive and object arrays, see Data Binding.
The component enables you to:
Popup Behavior
To open or close the popup programmatically, use the toggle method. Calling toggle does not fire the open or close events.
Set popupSettings to configure the popup. The input supports these options:
animate—Enables or disables the popup animation. Open and close animations are enabled by default.popupClass—Applies CSS classes to the popup.align—Sets horizontal alignment toleft,center, orright. The popup defaults to the left in left-to-right layouts and to the right in right-to-left layouts.appendTo—Selects the popup container:root(default),component, or aViewContainerRef.
The following demo sets a CSS class on the popup and enables its animation.
Item Templates
To define a template for every popup item, nest an <ng-template> with the kendoDropDownButtonItemTemplate directive inside the DropDownButton. Use let-dataItem to access the current data item in the template.
The following demo renders an SVG icon and label for each item.