ToolBarDropDownButtonComponent

Represents the Kendo UI ToolBar DropDownButton for Angular.

Selector

kendo-toolbar-dropdownbutton

Export Name

Accessible in templates as #kendoToolBarDropDownButtonInstance="kendoToolBarDropDownButton"

Inputs

Name	Type	Default	Description
arrowIcon	boolean | ArrowIconSettings	false	Allows showing the default arrow icon or providing alternative one instead.
buttonClass	string		The CSS classes that will be rendered on the main button. Supports the type of values that are supported by ngClass.
data	any[]		Sets the data of the DropDownButton (see example). The data has to be provided in an array-like list.
disabled	boolean		Sets the disabled state of the DropDownButton.
fillMode	ButtonFillMode		The fillMode property specifies the background and border styles of the Button. The available values are: solid (default) flat outline link null
icon	string		Defines an icon that will be rendered next to the button text.
iconClass	string		Defines an icon with a custom CSS class that will be rendered next to the button text.
imageUrl	string		Defines the location of an image that will be displayed next to the button text.
popupSettings	PopupSettings		Configures the popup of the DropDownButton. The available options are: animate:Boolean—Controls the popup animation. By default, the open and close animations are enabled. popupClass:String—Specifies a list of CSS classes that are used to style the popup.
showIcon	DisplayMode		Defines the location of the button icon that will be displayed.
showText	DisplayMode		Defines the location of the button text that will be displayed.
svgIcon	SVGIcon		Defines an SVGIcon to be rendered within the button. The input can take either an existing Kendo SVG icon or a custom one.
text	string		Sets the text of the DropDownButton (see example.
textField	string		Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
themeColor	ButtonThemeColor		The Button allows you to specify predefined theme colors. The theme color will be applied as a background and border color while also amending the text color accordingly (see example). The possible values are: base —Applies coloring based on the base theme color. (default) primary —Applies coloring based on the primary theme color. secondary—Applies coloring based on the secondary theme color. tertiary— Applies coloring based on the tertiary theme color. info—Applies coloring based on the info theme color. success— Applies coloring based on the success theme color. warning— Applies coloring based on the warning theme color. error— Applies coloring based on the error theme color. dark— Applies coloring based on the dark theme color. light— Applies coloring based on the light theme color. inverse— Applies coloring based on the inverse theme color. null —Removes the default CSS class (no class would be rendered).
title	string	''	Sets the title attribute of the underlying button element.

Events

Name	Type	Description
close	EventEmitter<PreventableEvent>	Fires each time the popup is about to close. This event is preventable. If you cancel the event, the popup will remain open.
itemClick	EventEmitter<any>	Fires each time the user clicks a DropDownButton item. The event data contains the data item that is bound to the clicked list item.
open	EventEmitter<PreventableEvent>	Fires each time the popup is about to open. This event is preventable. If you cancel the event, the popup will remain closed.