Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UIupdated
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editorupdated
    • Excel Export
    • File Saver
    • Filterupdated
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • ListBoxnew
    • ListView
    • Mapbeta
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PivotGridbeta
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Typography
    • Uploads
    Styling & Themes
    Common Features
    Project Setup
New to Kendo UI for Angular? Start a free 30-day trial

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

NameTypeDefaultDescription

arrowButtonClass

any

The CSS classes that will be rendered on the button which opens the popup. Supports the type of values that are supported by ngClass.

arrowButtonIcon

string

Specifies the name of the font icon that will be rendered for the button which opens the popup.

buttonClass

any

The CSS classes that will be rendered on the main button. Supports the type of values that are supported by ngClass.

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).

size

ButtonSize

The size property specifies the padding of the SplitButton (see example).

The possible values are:

  • small
  • medium (default)
  • large
  • none

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.

themeColor

ButtonThemeColor

The SplitButton allows you to specify predefined theme colors. The theme color will be applied as a background and border color while also amending the text color accordingly (see example).

The possible values are:

  • base Applies coloring based on the base theme color. (default)
  • primary Applies coloring based on the primary theme color.
  • secondaryApplies coloring based on the secondary theme color.
  • tertiary Applies coloring based on the tertiary theme color.
  • infoApplies coloring based on the info theme color.
  • success Applies coloring based on the success theme color.
  • warning Applies coloring based on the warning theme color.
  • error Applies coloring based on the error theme color.
  • dark Applies coloring based on the dark theme color.
  • light Applies coloring based on the light theme color.
  • inverse Applies coloring based on the inverse theme color.
  • none Removes the built in theme color.

type

string

Defines the type attribute of the main button

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).

fillMode

ButtonFillMode

The fillMode property specifies the background and border styles of the SplitButton (see example).

The available values are:

  • solid (default)
  • flat
  • outline
  • link

popupSettings

PopupSettings

Configures the popup of the SplitButton.

The available options are:

  • animate: BooleanControls the popup animation. By default, the open and close animations are enabled.
  • popupClass: StringSpecifies a list of CSS classes that are used to style the popup.
  • appendTo: "root" | "component" | ViewContainerRefSpecifies the component to which the popup will be appended.
  • align: "left" | "center" | "right"Specifies the alignment of the popup.

rounded

ButtonRounded

The rounded property specifies the border radius of the SplitButton (see example).

The possible values are:

  • small
  • medium (default)
  • large
  • full
  • none

Fields

NameTypeDefaultDescription

itemTemplate

ButtonItemTemplateDirective

An item template that helps to customize the item content.

isOpen

boolean

Returns the current open state of the popup.

Events

NameTypeDescription

buttonClick

EventEmitter<any>

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<PreventableEvent>

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<any>

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<any>

Fires each time the SplitButton gets blurred.

focus

EventEmitter<any>

Fires each time the SplitButton gets focused.

open

EventEmitter<PreventableEvent>

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.