The Split button allows you to perform an action using clicking the button and choosing extra options from the dropdown button. The Split button also can display both text and images.

{% highlight html %}

{% endhighlight %}

{% highlight html %}

• Open..
• Save
• Delete

{% endhighlight %}

• module:jQuery

• module:ej.core.js

• module:ej.data.js

• module:ej.splitbutton.js

• module:ej.menu.js

• module:ej.checkbox.js

N> jQuery.easing external dependency has been removed from version 14.3.0.49 onwards. Kindly include this jQuery.easing dependency for versions lesser than 14.3.0.49 in order to support animation effects.

{:#members:arrowposition}

Specifies the arrowPosition of the Split or Dropdown Button.See arrowPosition

• ej.ArrowPosition.Right

{% highlight html %}

<ej-splitbutton id="target1" target="#target" text="save" [width]="500" [buttonMode]="buttonMode" [contentType]="contentType" [arrowPosition]="arrowPosition" [prefixIcon]="prefixIcon">

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

export class AppComponent { contentType: any; buttonMode: any; arrowPosition: any; prefixIcon: string; constructor() { this.contentType = ej.ContentType.TextAndImage; this.buttonMode= ej.ButtonMode.Dropdown; this.arrowPosition= ej.ArrowPosition.Left; this.prefixIcon= "e-uiLight e-icon e-handup"; } }

{% endhighlight %}

{:#members:buttonmode}

Specifies the buttonMode like Split or Dropdown Button.See ButtonMode

• ej.ButtonMode.Split

{% highlight html %}

<ej-splitbutton id="target1" target="#target" text="save" [width]="100" [buttonMode]="buttonMode" [contentType]="contentType" [prefixIcon]="prefixIcon">

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

export class AppComponent { contentType: any; buttonMode: any; prefixIcon: string; constructor() { this.contentType = ej.ContentType.TextAndImage; this.buttonMode= ej.ButtonMode.Dropdown; this.prefixIcon= "e-uiLight e-icon e-handup"; } }

{% endhighlight %}

{:#members:contenttype}

Specifies the contentType of the Split Button.See ContentType

• ej.ContentType.TextOnly

{% highlight html %}

<ej-splitbutton id="target1" target="#target" text="save" [width]="100" [contentType]="contentType">

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

export class AppComponent { contentType: any; constructor() { this.contentType = ej.ContentType.TextOnly; } }

{% endhighlight %}

{:#members:cssclass}

Set the root class for Split Button control theme

• ""

{% highlight html %}

<ej-splitbutton id="target1" target="#target" text="save" [width]="100" [cssClass]="customCss">

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

export class AppComponent { customCss: string; constructor() { this.customCss = "gradient-lime"; } }

{% endhighlight %}

{:#members:enabled}

Specifies the disabling of Split Button if enabled is set to false.

• true

{% highlight html %}

<ej-splitbutton id="target1" target="#target" text="save" [width]="100" [enabled]="true">

• Open..
• Save
• Delete

{% endhighlight %}

{:#members:enablertl}

Specifies the enableRTL property for Split Button while initialization.

• false

{% highlight html %}

<ej-splitbutton id="target1" target="#target" text="save" [width]="100" [enableRTL]="true">

• Open..
• Save
• Delete

{% endhighlight %}

{:#members:height}

Specifies the height of the Split Button.

• “”

{% highlight html %}

<ej-splitbutton id="target1" target="#target" text="save" [width]="100" [height]="28">

• Open..
• Save
• Delete

{% endhighlight %}

{:#members:htmlattributes}

Specifies the HTML Attributes of the Split Button.

• {}

{% highlight html %}

<ej-splitbutton id="target1" target="#target" text="save" [width]="100" [htmlAttributes]="htmlAttributes">

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

export class AppComponent { htmlAttributes: Object; constructor() { this.htmlAttributes = {disabled:"disabled"}; } }

{% endhighlight %}

{:#members:imageposition}

Specifies the imagePosition of the Split Button.See imagePositions

• ej.ImagePosition.ImageRight

{% highlight html %}

<ej-splitbutton id="target1" target="#target" text="save" [width]="100" [contentType]="contentType" [imagePosition]="imagePosition" [prefixIcon]="prefixIcon">

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

export class AppComponent { contentType: any; imagePosition: any; prefixIcon: string; constructor() { this.contentType = ej.ContentType.TextAndImage; this.imagePosition= ej.ImagePosition.ImageRight; this.prefixIcon="e-uiLight e-icon e-handup"; } }

{% endhighlight %}

{:#members:prefixicon}

Specifies the image content for Split Button while initialization.

• ""

{% highlight html %}

<ej-splitbutton id="target1" target="#target" text="save" [width]="100" [contentType]="contentType" [prefixIcon]="prefixIcon">

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

export class AppComponent { contentType: any; prefixIcon: string; constructor() { this.contentType = ej.ContentType.ImageOnly; this.prefixIcon="e-uiLight e-icon e-handup"; } }

{% endhighlight %}

{:#members:showroundedcorner}

Specifies the showRoundedCorner property for Split Button while initialization.

• false

{% highlight html %}

<ej-splitbutton id="target1" target="#target" text="save" [width]="100" [showRoundedCorner]="true">

• Open..
• Save
• Delete

{% endhighlight %}

{:#members:size}

Specifies the size of the Button. See ButtonSize

• ej.ButtonSize.Normal

{% highlight html %}

<ej-splitbutton id="target1" target="#target" text="save" [width]="100" [size]="size">

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

export class AppComponent { size: any; constructor() { this.size = ej.ButtonSize.Mini; } }

{% endhighlight %}

{:#members:suffixicon}

Specifies the image content for Split Button while initialization.

• ""

{% highlight html %}

<ej-splitbutton id="target1" target="#target" text="save" [width]="100" [contentType]="contentType" [prefixIcon]="prefixIcon" [suffixIcon]="suffixIcon">

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

export class AppComponent { contentType: any; suffixIcon: string; prefixIcon: string; constructor() { this.contentType = ej.ContentType.ImageBoth; this.suffixIcon= "e-uiLight e-icon-padlockclosed"; this.prefixIcon= "e-uiLight e-icon-handup"; } }

{% endhighlight %}

{:#members:targetid}

Specifies the list content for Split Button while initialization

• ""

{% highlight html %}

<ej-splitbutton id="target1" targetID="target" [width]="100">

• Open..
• Save
• Delete

{% endhighlight %}

N> Usage of target API is recommended since targetID API is to be deprecated.

{:#members:target}

Specifies the target of SplitButton menu while initialization with ID or class as a selector.

• ""

{% highlight html %}

<ej-splitbutton id="target1" target="#target" [width]="100">

• Open..
• Save
• Delete

{% endhighlight %}

{:#members:text}

Specifies the text content for Split Button while initialization.

• ""

{% highlight html %}

• Open..
• Save
• Delete

{% endhighlight %}

{:#members:width}

Specifies the width of the Split Button.

• “”

{% highlight html %}

• Open..
• Save
• Delete

{% endhighlight %}

{:#methods:destroy}

Destroy the split button widget all events bound using this._on will be unbind automatically and bring the control to pre-init state.

{% highlight html %}

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

// Create instance of SplitButton

var splitObject=$("#splitButton").data("ejSplitButton"); splitObject.destroy(); // To destroy the SplitButton

{% endhighlight %}

{:#methods:disable}

To disable the split button

{% highlight html %}

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

// Create instance of SplitButton

var splitObject=$("#splitButton").data("ejSplitButton"); splitObject.disable(); // To disable the SplitButton

{% endhighlight %}

{:#methods:enable}

To Enable the split button

{% highlight html %}

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

// Create instance of SplitButton

var splitObject=$("#splitButton").data("ejSplitButton"); splitObject.enable(); // To enable the SplitButton

{% endhighlight %}

{:#methods:hide}

To hide the list content of the split button.

{% highlight html %}

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

// Create instance of SplitButton

var splitObject=$("#splitButton").data("ejSplitButton"); splitObject.hide(); // To hide the SplitButton

{% endhighlight %}

{:#methods:show}

To show the list content of the split button.

{% highlight html %}

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

// Create instance of SplitButton

var splitObject=$("#splitButton").data("ejSplitButton"); splitObject.show(); // To show the SplitButton

{% endhighlight %}

{:#events:beforeopen}

Fires before menu of the split button control is opened.

{% highlight html %}

<ej-splitbutton id="splitButton" targetID="target" width="100" (beforeOpen)="onBeforeOpen($event)">

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor() { } onBeforeOpen(e: any){ // Your code here } }

{% endhighlight %}

{:#events:ejclick}

Fires when Button control is clicked successfully

{% highlight html %}

<ej-splitbutton id="splitButton" targetID="target" width="100" (ejclick)="onClick($event)">

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor() { } onClick(e: any){ // Your code here } }

{% endhighlight %}

{:#events:close}

Fires before the list content of Button control is closed

{% highlight html %}

<ej-splitbutton id="splitButton" targetID="target" width="100" (close)="onClose($event)">

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor() { } onClose(e: any){ // Your code here } }

{% endhighlight %}

{:#events:create}

Fires after Split Button control is created.

{% highlight html %}

<ej-splitbutton id="splitButton" targetID="target" width="100" (create)="onCreate($event)">

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor() { } onCreate(e: any){ // Your code here } }

{% endhighlight %}

{:#events:destroy}

Fires when the Split Button is destroyed successfully

{% highlight html %}

<ej-splitbutton id="splitButton" targetID="target" width="100" (destroy)="onDestroy($event)">

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor() { } onDestroy(e: any){ // Your code here } }

{% endhighlight %}

{:#events:itemmouseout}

Fires when a menu item is Hovered out successfully

{% highlight html %}

<ej-splitbutton id="splitButton" targetID="target" width="100" (itemMouseOut)="onItemMouseOut($event)">

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor() { } onItemMouseOut(e: any){ // Your code here } }

{% endhighlight %}

{:#events:itemmouseover}

Fires when a menu item is Hovered in successfully

{% highlight html %}

<ej-splitbutton id="splitButton" targetID="target" width="100" (itemMouseOver)="onItemMouseOver($event)">

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor() { } onItemMouseOver(e: any){ // Your code here } }

{% endhighlight %}

{:#events:itemselected}

Fires when a menu item is clicked successfully

{% highlight html %}

<ej-splitbutton id="splitButton" targetID="target" width="100" (itemSelected)="onItemSelected($event)">

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor() { } onItemSelected(e: any){ // Your code here } }

{% endhighlight %}

{:#events:open}

Fires before the list content of Button control is opened

{% highlight html %}

<ej-splitbutton id="splitButton" targetID="target" width="100" (open)="onOpen($event)">

• Open..
• Save
• Delete

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor() { } onOpen(e: any){ // Your code here } }

{% endhighlight %}