All Components

DropDownButton Overview

The DropDownButton has the appearance of a button.

When you click on it, the DropDownButton shows a popup list with items.

Basic Usage

The following example demonstrates the DropDownButton in action.

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

Features

The DropDownButton delivers the following features:

Events

On Clicking Popup Items

The itemClick event is triggered each time the user clicks on a popup item.

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

    public onDropDownButtonItemClick(dataItem: any): void {
        console.log(`You clicked ${dataItem.text}`);
    }
}
In this article