Components
    • Buttons
    • Charts
    • Conversational UI
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Gauges
    • Grid
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListView
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • Popup
    • ProgressBars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltip
    • TreeList
    • TreeView
    • Uploads
    Styling & Themes
    Common Features
    Advanced Setup

ButtonItemTemplateDirective

Used for rendering the list item content.

To define the item template, nest a <ng-template> tag with the kendo<ComponentName>ItemTemplate directive inside the component tag.

For the DropDownButton, use the kendoDropDownButtonItemTemplate directive. For the SplitButton, use the kendoSplitButtonItemTemplate directive.

The template context is set to the current component. To get a reference to the current data item, use the let-dataItem directive.

@Component({
selector: 'my-app',
template: `
 <kendo-splitbutton [data]="listItems">
   <ng-template kendoSplitButtonItemTemplate let-dataItem>
     <span>{{dataItem}} option</span>
   </ng-template>
 </kendo-splitbutton>
 <kendo-dropdownbutton [data]="listItems">
   <ng-template kendoDropDownButtonItemTemplate let-dataItem>
     <span>{{dataItem}} option</span>
   </ng-template>
 </kendo-dropdownbutton>
`
})
class AppComponent {
  public listItems: Array<any> = [{
     text: 'item1',
     icon: 'refresh',
     disabled: false,
     click: (dataItem: any) => {
         //action
     }
 }, {
     text: 'item2',
     icon: 'refresh',
     disabled: false,
     click: (dataItem: any) => {
         //action
     }
 }]
}

For more examples, refer to the article on the DropDownList templates.

Selector

[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]

In this article

Not finding the help you need?