All Components

DropDownButtonComponent

Represents the Kendo UI DropDownButton component for Angular.

@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

icon string

Defines the name of an existing icon in a Kendo UI theme.

iconClass string

Defines the list of CSS classes which are used for styling the Button with custom icons.

imageUrl string

Defines a URL for styling the button with a custom image.

tabIndex number

Specifies the tabIndex of the component.

textField string

Sets the data item field that represents the item text.
If the data contains only primitive values, do not define it.

data any

Sets or gets the data of the DropDownButton.

The data has to be provided in an array-like list.

disabled boolean

Sets the disabled state of the DropDownButton.

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.

Fields

isOpen boolean

Returns the current open state of the popup.

Events

close EventEmitter

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

Fires each time the user clicks on a drop-down list item. The event data contains the data item bound to the clicked list item.

blur EventEmitter

Fires each time the DropDownButton gets blurred.

focus EventEmitter

Fires each time the DropDownButton gets focused.

open EventEmitter

Fires each time the popup is about to open.
This event is preventable. If you cancel the event, the popup will remain closed.

Methods

blur

Blurs the DropDownButton component.

focus

Focuses the DropDownButton component.

toggle

Toggles the visibility of the popup.
If the toggle method is used to open or close the popup, the open and close events will not be fired.

Parameters

open boolean

The state of the popup.

In this article