SplitButtonComponent

Represents the Kendo UI SplitButton component for Angular.

@Component({
selector: 'my-app',
template: `
 <kendo-splitbutton [data]="data" [icon]="'paste'"
     (itemClick)="onSplitButtonItemClick($event)"
     (buttonClick)="onSplitButtonClick()">Paste</kendo-splitbutton>
`
})

class AppComponent {
  public data: Array<any> = [{
      text: 'Keep Text Only',
      icon: 'paste-plain-text',
      click: () => { console.log('Keep Text Only click handler'); }
  }, {
      text: 'Paste as HTML',
      icon: 'paste-as-html'
  }, {
      text: 'Paste Markdown',
      icon: 'paste-markdown'
  }, {
      text: 'Set Default Paste'
  }];

  public onSplitButtonClick(dataItem: any): void {
      console.log('Paste');
  }

  public onSplitButtonItemClick(dataItem: any): void {
      if (dataItem) {
          console.log(dataItem.text);
      }
  }
}

Selector

kendo-splitbutton

Export Name

Accessible in templates as #kendoSplitButtonInstance="kendoSplitButton"

Inputs

icon string

Defines an icon to be rendered next to the button text
(see example).

iconClass string

Defines an icon with a custom CSS class to be rendered next to the button text
(see example).

imageUrl string

Defines the location of an image to be displayed next to the button text
(see example).

look ButtonLook

Changes the visual appearance by using alternative styling options.

The available values are:

• flat
• outline

tabIndex number

Specifies the tabIndex of the component.

text string

Sets the text of the SplitButton.

textField string

Configures the text field of the button-list popup.

data any

Sets the data of the SplitButton.

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

disabled boolean

When set to true, disables a SplitButton item
(see example).

popupSettings PopupSettings

Configures the popup of the SplitButton.

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.
• appendTo: "root" | "component" | ViewContainerRef—Specifies the component to which the popup will be appended.

Fields

itemTemplate ButtonItemTemplateDirective

An item template that helps to customize the item content.

isOpen boolean

Returns the current open state of the popup.

Events

buttonClick EventEmitter

Fires each time the user clicks the main button.

@Component({
   selector: 'my-app',
   template: `
       <kendo-splitbutton (buttonClick)="onSplitButtonClick()" [data]="data">
           Reply
       </kendo-splitbutton>
   `
})
class AppComponent {
   public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete'];

   public onSplitButtonClick(): void {
     console.log('SplitButton click');
   }
}

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 the drop-down list. The event data contains the data item bound to the clicked list item.

@Component({
    selector: 'my-app',
   template: `
       <kendo-splitbutton (itemClick)="onSplitButtonItemClick($event)" [data]="data">
         Reply
     </kendo-splitbutton>
   `
})
class AppComponent {
   public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete'];

  public onSplitButtonItemClick(dataItem?: string): void {
       if (dataItem) {
           console.log(dataItem);
      }
   }
}

blur EventEmitter

Fires each time the SplitButton gets blurred.

focus EventEmitter

Fires each time the SplitButton 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 SplitButton component.

focus

Focuses the SplitButton 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.