ejSplitButton

8 Mar 201824 minutes to read

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.

Syntax

  • HTML
    • <ej-splitbutton></ej-splitbutton>

    Example

  • HTML
    • <ej-splitbutton id="target1" target="#target" text="save" width="500" buttonMode="split"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>

    Requires

    • module:jQuery

    • module:ej.core.js

    • module:ej.data.js

    • module:ej.splitbutton.js

    • module:ej.menu.js

    • module:ej.checkbox.js

    NOTE

    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 string|enum

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

    Name Description
    Left To set Left arrowPosition of the split button
    Right To set Right arrowPosition of the split button
    Top To set Top arrowPosition of the split button
    Bottom To set Bottom arrowPosition of the split button

    Default Value

    • ej.ArrowPosition.Right

    Example

  • HTML
    • <ej-splitbutton id="target1" target="#target" text="save" [width]="500" [buttonMode]="buttonMode" [contentType]="contentType" [arrowPosition]="arrowPosition" [prefixIcon]="prefixIcon"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • 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";
    }
}

    buttonMode string|enum

    Specifies the buttonMode like Split or Dropdown Button.See ButtonMode

    Name Description
    Split To specify Split mode of the button type
    Dropdown To specify Dropdown mode of the button type

    Default Value

    • ej.ButtonMode.Split

    Example

  • HTML
    • <ej-splitbutton id="target1" target="#target" text="save" [width]="100" [buttonMode]="buttonMode" [contentType]="contentType" [prefixIcon]="prefixIcon"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • 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";
    }
}

    contentType string|enum

    Specifies the contentType of the Split Button.See ContentType

    Name Description
    TextOnly To specify the text contentType
    ImageOnly To specify the image contentType
    ImageBoth To specify the two images of contentType
    TextAndImage To specify the Text and Image contentType
    ImageTextImage To specify the image text and image contentType

    Default Value

    • ej.ContentType.TextOnly

    Example

  • HTML
    • <ej-splitbutton id="target1" target="#target" text="save" [width]="100" [contentType]="contentType"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • TS
    • export class AppComponent {
    contentType: any;
    constructor() {
      this.contentType = ej.ContentType.TextOnly;
    }
}

    cssClass string

    Set the root class for Split Button control theme

    Default Value

    • ””

    Example

  • HTML
    • <ej-splitbutton id="target1" target="#target" text="save" [width]="100" [cssClass]="customCss"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • TS
    • export class AppComponent {
    customCss: string;
    constructor() {
      this.customCss = "gradient-lime";
    }
}

    enabled boolean

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

    Default Value

    • true

    Example

  • HTML
    • <ej-splitbutton id="target1" target="#target" text="save" [width]="100" [enabled]="true"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>

    enableRTL boolean

    Specifies the enableRTL property for Split Button while initialization.

    Default Value

    • false

    Example

  • HTML
    • <ej-splitbutton id="target1" target="#target" text="save" [width]="100" [enableRTL]="true"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>

    height string|number

    Specifies the height of the Split Button.

    Default Value

    • “”

    Example

  • HTML
    • <ej-splitbutton id="target1" target="#target" text="save" [width]="100" [height]="28"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>

    htmlAttributes object

    Specifies the HTML Attributes of the Split Button.

    Default Value

    • {}

    Example

  • HTML
    • <ej-splitbutton id="target1" target="#target" text="save" [width]="100" [htmlAttributes]="htmlAttributes"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • TS
    • export class AppComponent {
    htmlAttributes: Object;
    constructor() {
      this.htmlAttributes = {disabled:"disabled"};
    }
}

    imagePosition string|enum

    Specifies the imagePosition of the Split Button.See imagePositions

    Name Description
    ImageRight To specify Left position of the split button
    ImageLeft To specify Right position of the split button
    ImageTop To specify Top position of the split button
    ImageBottom To specify Bottom position of the split button

    Default Value

    • ej.ImagePosition.ImageRight

    Example

  • HTML
    • <ej-splitbutton id="target1" target="#target" text="save" [width]="100" [contentType]="contentType" [imagePosition]="imagePosition" [prefixIcon]="prefixIcon"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • 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";
    }
}

    prefixIcon string

    Specifies the image content for Split Button while initialization.

    Default Value

    • ””

    Example

  • HTML
    • <ej-splitbutton id="target1" target="#target" text="save" [width]="100" [contentType]="contentType" [prefixIcon]="prefixIcon"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • TS
    • export class AppComponent {
    contentType: any;
    prefixIcon: string;
    constructor() {
      this.contentType = ej.ContentType.ImageOnly;
      this.prefixIcon="e-uiLight e-icon e-handup";
    }
}

    showRoundedCorner boolean

    Specifies the showRoundedCorner property for Split Button while initialization.

    Default Value

    • false

    Example

  • HTML
    • <ej-splitbutton id="target1" target="#target" text="save" [width]="100" [showRoundedCorner]="true"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>

    size string|enum

    Specifies the size of the Button. See ButtonSize

    Name Description
    Mini To specify the minimum size of the split button
    Small To specify the small size of the split button
    Medium To specify the medium size of the split button
    Large To specify the large size of the split button
    Normal To specify the normal size of the split button

    Default Value

    • ej.ButtonSize.Normal

    Example

  • HTML
    • <ej-splitbutton id="target1" target="#target" text="save" [width]="100" [size]="size"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • TS
    • export class AppComponent {
    size: any;
    constructor() {
      this.size = ej.ButtonSize.Mini;
    }
}

    suffixIcon string

    Specifies the image content for Split Button while initialization.

    Default Value

    • ””

    Example

  • HTML
    • <ej-splitbutton id="target1" target="#target" text="save" [width]="100" [contentType]="contentType" [prefixIcon]="prefixIcon" [suffixIcon]="suffixIcon"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • 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";
    }
}

    targetID string

    Specifies the list content for Split Button while initialization

    Default Value

    • ””

    Example

  • HTML
    • <ej-splitbutton id="target1" targetID="target" [width]="100"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>>

    NOTE

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

    target string

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

    Default Value

    • ””

    Example

  • HTML
    • <ej-splitbutton id="target1" target="#target" [width]="100"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>

    text string

    Specifies the text content for Split Button while initialization.

    Default Value

    • ””

    Example

  • HTML
    • <ej-splitbutton id="target1" target="#target" text="New"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>

    width string|number

    Specifies the width of the Split Button.

    Default Value

    • “”

    Example

  • HTML
    • <ej-splitbutton id="target1" target="#target" width="100"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>

    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.

    Example

  • HTML
    • <ej-splitbutton id="splitButton" targetID="target" width="100"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • TS
    • // Create instance of SplitButton

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

    disable()

    To disable the split button

    Example

  • HTML
    • <ej-splitbutton id="splitButton" targetID="target" width="100"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • TS
    • // Create instance of SplitButton

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

    enable()

    To Enable the split button

    Example

  • HTML
    • <ej-splitbutton id="splitButton" targetID="target" width="100"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • TS
    • // Create instance of SplitButton

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

    hide()

    To hide the list content of the split button.

    Example

  • HTML
    • <ej-splitbutton id="splitButton" targetID="target" width="100"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • TS
    • // Create instance of SplitButton

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

    show()

    To show the list content of the split button.

    Example

  • HTML
    • <ej-splitbutton id="splitButton" targetID="target" width="100"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • TS
    • // Create instance of SplitButton

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

    Events

    beforeOpen

    Fires before menu of the split button control is opened.

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the split button model
    type string returns the name of the event

    Example

  • HTML
    • <ej-splitbutton id="splitButton" targetID="target" width="100" (beforeOpen)="onBeforeOpen($event)"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • TS
    • export class AppComponent {
        constructor() { 
        }
        onBeforeOpen(e: any){
        // Your code here
        }
}

    ejclick

    Fires when Button control is clicked successfully

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the split button model
    type string returns the name of the event
    target object returns the target of the current object.
    status boolean return the button state

    Example

  • HTML
    • <ej-splitbutton id="splitButton" targetID="target" width="100" (ejclick)="onClick($event)"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • TS
    • export class AppComponent {
        constructor() { 
        }
        onClick(e: any){
        // Your code here
        }
}

    close

    Fires before the list content of Button control is closed

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the split button model
    type string returns the name of the event

    Example

  • HTML
    • <ej-splitbutton id="splitButton" targetID="target" width="100" (close)="onClose($event)"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • TS
    • export class AppComponent {
        constructor() { 
        }
        onClose(e: any){
        // Your code here
        }
}

    create

    Fires after Split Button control is created.

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the split button model
    type string returns the name of the event

    Example

  • HTML
    • <ej-splitbutton id="splitButton" targetID="target" width="100" (create)="onCreate($event)"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • TS
    • export class AppComponent {
        constructor() { 
        }
        onCreate(e: any){
        // Your code here
        }
}

    destroy

    Fires when the Split Button is destroyed successfully

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the split button model
    type string returns the name of the event

    Example

  • HTML
    • <ej-splitbutton id="splitButton" targetID="target" width="100" (destroy)="onDestroy($event)"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • TS
    • export class AppComponent {
        constructor() { 
        }
        onDestroy(e: any){
        // Your code here
        }
}

    itemMouseOut

    Fires when a menu item is Hovered out successfully

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the split button model
    type string returns the name of the event
    element object returns the clicked menu item element
    event object returns the event
    Name Type Description
    ID String return the menu item id
    Text String return the clicked menu item text

    Example

  • HTML
    • <ej-splitbutton id="splitButton" targetID="target" width="100" (itemMouseOut)="onItemMouseOut($event)"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • TS
    • export class AppComponent {
        constructor() { 
        }
        onItemMouseOut(e: any){
        // Your code here
        }
}

    itemMouseOver

    Fires when a menu item is Hovered in successfully

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the split button model
    type string returns the name of the event
    element object returns the clicked menu item element
    event object returns the event
    Name Type Description
    ID String return the menu item id
    Text String return the clicked menu item text

    Example

  • HTML
    • <ej-splitbutton id="splitButton" targetID="target" width="100" (itemMouseOver)="onItemMouseOver($event)"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • TS
    • export class AppComponent {
        constructor() { 
        }
        onItemMouseOver(e: any){
        // Your code here
        }
}

    itemSelected

    Fires when a menu item is clicked successfully

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the split button model
    type string returns the name of the event
    element object returns the clicked menu item element
    selectedItem object returns the selected item
    menuId String return the menu id
    menuText String return the clicked menu item text

    Example

  • HTML
    • <ej-splitbutton id="splitButton" targetID="target" width="100" (itemSelected)="onItemSelected($event)"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • TS
    • export class AppComponent {
        constructor() { 
        }
        onItemSelected(e: any){
        // Your code here
        }
}

    open

    Fires before the list content of Button control is opened

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the split button model
    type string returns the name of the event

    Example

  • HTML
    • <ej-splitbutton id="splitButton" targetID="target" width="100" (open)="onOpen($event)"></ej-splitbutton>
<ul id="target">
<li><a href="#">Open..</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
  • TS
    • export class AppComponent {
        constructor() { 
        }
        onOpen(e: any){
        // Your code here
        }
}