DropDownButtonComponent

Represents the Kendo UI DropDownButton component for Angular.

Use the DropDownButton to display a button with a popup list of actions.

ts

@Component({
  selector: 'my-app',
  template: `
    <kendo-dropdownbutton [data]="data">
      User Settings
    </kendo-dropdownbutton>
  `
})
class AppComponent {
  public data: Array<any> = [
    { text: 'My Profile' },
    { text: 'Friend Requests' },
    { text: 'Account Settings' },
    { text: 'Support' },
    { text: 'Log Out' }
  ];
}

Selector

kendo-dropdownbutton

Export Name

Accessible in templates as #kendoDropDownButtonInstance="kendoDropDownButton"

Inputs

Name	Type	Default	Description
arrowIcon	boolean | ArrowIconSettings	false	Displays the default arrow icon or a custom one.
buttonAttributes	{[key: string]: string}		Sets attributes for the main button.
buttonClass	any		The CSS classes applied to the main button. Supports the same values as ngClass.
data	any		Sets or gets the data of the DropDownButton. Provide the data as an array-like list.
disabled	boolean		Sets the disabled state of the DropDownButton. When true, the button is disabled and cannot be interacted with.
fillMode	ButtonFillMode	'solid'	Specifies the background and border styles of the DropDownButton. See DropDownButton Appearance.
icon	string		Specifies the name of an existing icon in the Kendo UI theme.
iconClass	string		Specifies a list of CSS classes for styling the button with custom icons.
imageUrl	string		Specifies a URL for styling the button with a custom image.
popupSettings	PopupSettings		Configures the popup of the DropDownButton.
rounded	ButtonRounded	'medium'	Specifies the border radius of the DropDownButton. See DropDownButton Appearance.
size	ButtonSize	'medium'	Specifies the padding of the DropDownButton. See DropDownButton Appearance.
svgIcon	SVGIcon		Specifies an SVGIcon to render within the button.
tabIndex	number	0	Specifies the tabIndex of the component. Determines the order of focus when navigating with the keyboard.
textField	string		Sets the data item field that represents the item text. If the data contains only primitive values, leave this undefined.
themeColor	ButtonThemeColor	'base'	Specifies predefined theme colors for the DropDownButton. See DropDownButton Appearance.

Fields

Name	Type	Default	Description
isOpen	boolean		Returns the current open state of the popup.

Events

Name	Type	Description
close	EventEmitter<PreventableEvent>	Fires when the popup is about to close. This event is preventable. Canceling the event keeps the popup open.
itemClick	EventEmitter<any>	Fires when the user clicks a drop-down list item. The event data contains the data item bound to the clicked list item.
blur	EventEmitter<any>	Fires when the DropDownButton is blurred.
focus	EventEmitter<any>	Fires when the DropDownButton is focused.
open	EventEmitter<PreventableEvent>	Fires when the popup is about to open. This event is preventable. Canceling the event keeps the popup closed.

Methods

blur
Blurs the DropDownButton.

focus
Focuses the DropDownButton.

toggle
Toggles the visibility of the popup. If the toggle method is used, the open and close events are not fired.
Parameters open boolean The desired state of the popup.