All Components

Popup Items and Item Templates

The DropDownButton provides options for setting the behavior of its popup and popup items.

The component enables you to:

Popup Items

To control the visibility of the popup items, use the toggle method. To configure the behavior of the popup, use the animate and popupClass settings.

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

Item Templates

The DropDownButton allows you to define templates for the items it displays in the popup.

@Component({
    selector: 'my-app',
    template: `
        <kendo-dropdownbutton [data]="data">
            Export
            <ng-template kendoDropDownButtonItemTemplate let-dataItem>
                <span class="k-icon k-i-{{ dataItem.icon }}"></span>
                <span>{{ dataItem.text }}</span>
            </ng-template>
        </kendo-dropdownbutton>
    `
})
class AppComponent {
    data: Array<any> = [{
        text: 'To PDF',
        icon: 'pdfa'
    }, {
        text: 'To Excel',
        icon: 'xlsa'
    }];
}
In this article