Contents
- Properties
- Methods
- Events
Having trouble getting help?
Contact Support
Contact Support
Migration from Essential® JS 1
8 Dec 20247 minutes to read
This article describes the API migration process of SplitButton component from Essential® JS 1 to Essential® JS 2.
Properties
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
---|---|---|
Specifies the text of the splitbutton |
Property: text <ej-split-button id="splitbutton" text="login"></ej-split-button>
|
Property: content <ejs-splitbutton id="splitbutton" content="Paste"></ejs-splitbutton>
|
Popup content |
Property: target <ej-split-button id="splitbutton" text="SplitButton" target="#target"></ej-split-button>
|
Property: target <ejs-splitbutton id="splitbutton" target="#target" content="SplitButton" ></ejs-splitbutton>
|
Popup items | Not applicable |
Property: items <ejs-splitbutton id="splitbutton" content="Paste" items="ViewBag.items"></ejs-splitbutton>
|
Arrow position |
Property: arrowPosition <ej-split-button id="splitbutton" text="login" target="#target" arrow-position="@ArrowPosition.Left"></ej-split-button>
|
Not applicable |
Button mode |
Property: buttonMode <ej-split-button id="splitbutton" text="login" target="#target" button-mode="@ButtonMode.Dropdown"></ej-split-button>
|
Not applicable |
Content type |
Property: contentType <ej-split-button id="splitbutton" text="login" content-type="TextOnly" target="#target"></ej-split-button>
|
Not applicable |
Icons |
Property: prefixIcon <ej-split-button id="splitbutton" text="login" content-type="TextAndImage" prefix-icon="e-icon e-handup" target="#target"></ej-split-button>
|
Property: iconCss <ejs-splitbutton id="splitbutton" content="Paste" items="ViewBag.items" iconCss="e-icons e-paste"></ejs-splitbutton>
|
Icon position |
Property: imagePosition <ej-split-button id="splitbutton" text="login" content-type="TextAndImage" prefix-icon="e-icon e-handup" target="#target" image-position="@ImagePosition.ImageTop"></ej-split-button>
|
Property: iconPosition <ejs-splitbutton id="splitbutton" content="Paste" items="ViewBag.items" iconCss="e-icons e-paste" iconPosition="Top"></ejs-splitbutton>
|
Secondary icon |
Property: suffixIcon <ej-split-button id="splitbutton" text="login" content-type="ImageTextImage" prefix-icon="e-icon e-handup" suffix-icon="e-icon e-palette" target="#target"></ej-split-button>
|
Not applicable |
Adding custom class |
Property: cssClass <ej-split-button id="splitbutton" text="SplitButton" target="#target" css-class="custom-class"></ej-split-button>
|
Property: cssClass <ejs-splitbutton id="splitbutton" items="ViewBag.items" cssClass="custom-class"></ejs-splitbutton>
|
Disabled state |
Property: enabled <ej-split-button id="splitbutton" text="login" target="#target" enabled="false"></ej-split-button>
|
Property: disabled <ejs-splitbutton id="splitbutton" items="ViewBag.items" disabled="true"></ejs-splitbutton>
|
RTL |
Property: enableRTL <ej-split-button id="splitbutton" text="login" target="#target" content-type="TextAndImage" prefix-icon="e-icon e-handup" enable-rtl="true"></ej-split-button>
|
Property: enableRtl <ejs-splitbutton id="splitbutton" items="ViewBag.items" content="Paste" enableRtl="true" iconCss="e-icons e-paste"></ejs-splitbutton>
|
Height |
Property: height <ej-split-button id="splitbutton" text="login" target="#target" height="30"></ej-split-button>
|
Not applicable |
Width |
Property: width <ej-split-button id="splitbutton" text="login" target="#target" width="100"></ej-split-button>
|
Not applicable |
HTML attributes |
Property: htmlAttributes <ej-split-button id="splitbutton" text="login" target="#target" html-attributes=""></ej-split-button>
|
Not applicable |
Show rounded corner |
Property: showRoundedCorner <ej-split-button id="splitbutton" text="login" target="#target" show-rounded-corner="true"></ej-split-button>
|
Not applicable |
Size |
Property: size <ej-split-button id="splitbutton" size="@ButtonSize.Small" text="Small" target="#target"></ej-split-button>
|
Property: cssClass <ejs-splitbutton id="splitbutton" items="ViewBag.items" content="Small" cssClass="e-small"></ejs-splitbutton>
|
Methods
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
---|---|---|
Destroy method |
Method: destroy <ej-split-button id="splitbutton" text="SplitButton" target="#target"></ej-split-button> var splitButton = $(“#splitbutton”).data(“ejSplitButton”); splitButton.destroy(); |
Method: destroy <ejs-splitbutton id="splitbutton" items="ViewBag.items" content="SplitButton"></ejs-splitbutton> var splitButton = document.getElementById(“splitbutton”).ej2_instances[0]; splitButton.destroy(); |
Disable method |
Method: disable <ej-split-button id="splitbutton" text="SplitButton" target="#target"></ej-split-button> var splitButton = $(“#splitbutton”).data(“ejSplitButton”); splitButton.disable(); |
Not applicable |
Enable method |
Method: enable <ej-split-button id="splitbutton" text="SplitButton" target="#target"></ej-split-button> var splitButton = $(“#splitbutton”).data(“ejSplitButton”); splitButton.enable(); |
Not applicable |
Hide popup |
Method: hide <ej-split-button id="splitbutton" text="SplitButton" target="#target"></ej-split-button> var splitButton = $(“#splitbutton”).data(“ejSplitButton”); splitButton.hide(); |
Method: toggle <ejs-splitbutton id="splitbutton" items="ViewBag.items" content="SplitButton"></ejs-splitbutton> var splitButton = document.getElementById(“splitbutton”).ej2_instances[0]; splitButton.toggle(); |
Show popup |
Method: show <ej-split-button id="splitbutton" text="SplitButton" target="#target"></ej-split-button> var splitButton = $(“#splitbutton”).data(“ejSplitButton”); splitButton.show(); |
Method: toggle <ejs-splitbutton id="splitbutton" items="ViewBag.items" content="SplitButton"></ejs-splitbutton> var splitButton = document.getElementById(“splitbutton”).ej2_instances[0]; splitButton.toggle(); |
Events
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
---|---|---|
BeforeOpen event |
Event: beforeOpen <ej-split-button id="splitbutton" text="SplitButton" target="#target" before-open="beforeOpen"></ej-split-button> function beforeOpen(args) { /** code block */ } |
Event: beforeOpen <ejs-splitbutton id="splitbutton" items="ViewBag.items" content="SplitButton" beforeOpen="beforeOpen"></ejs-splitbutton> function beforeOpen(args) { /** code block */ } |
Click event |
Event: click <ej-split-button id="splitbutton" text="SplitButton" target="#target" click="click"></ej-split-button> function click(args) { /** code block */ } |
Event: click <ejs-splitbutton id="splitbutton" items="ViewBag.items" content="SplitButton" click="click"></ejs-splitbutton> function click(args) { /** code block */ } |
Close event |
Event: close <ej-split-button id="splitbutton" text="SplitButton" target="#target" close="close"></ej-split-button> function close(args) { /** code block */ } |
Event: close <ejs-splitbutton id="splitbutton" items="ViewBag.items" content="SplitButton" close="close"></ejs-splitbutton> function close(args) { /** code block */ } |
Create event |
Event: create <ej-split-button id="splitbutton" text="SplitButton" target="#target" create="create"></ej-split-button> function create(args) { /** code block */ } |
Event: created <ejs-splitbutton id="splitbutton" items="ViewBag.items" content="SplitButton" created="created"></ejs-splitbutton> function created() { /** code block */ } |
Destroy event |
Event: destroy <ej-split-button id="splitbutton" text="SplitButton" target="#target" destroy="destroy"></ej-split-button> function destroy(args) { /** code block */ } |
Not applicable |
ItemMouseOut event |
Event: itemMouseOut <ej-split-button id="splitbutton" text="SplitButton" target="#target" item-mouse-out="itemMouseOut"></ej-split-button> function itemMouseOut(args) { /** code block */ } |
Not applicable |
ItemMouseOver event |
Event: itemMouseOver <ej-split-button id="splitbutton" text="SplitButton" target="#target" item-mouse-over="itemMouseOver"></ej-split-button> function itemMouseOver(args) { /** code block */ } |
Not applicable |
Item select event |
Event: itemSelected <ej-split-button id="splitbutton" text="SplitButton" target="#target" item-selected="itemSelected"></ej-split-button> function itemSelected(args) { /** code block */ } |
Event: select <ejs-splitbutton id="splitbutton" items="ViewBag.items" content="SplitButton" select="select"></ejs-splitbutton> function select(args) { /** code block */ } |
Open event |
Event: open <ej-split-button id="splitbutton" text="SplitButton" target="#target" open="open"></ej-split-button> function open(args) { /** code block */ } |
Event: open <ejs-splitbutton id="splitbutton" items="ViewBag.items" content="SplitButton" open="open"></ejs-splitbutton> function open(args) { /** code block */ } |
BeforeClose event | Not applicable |
Event: beforeClose <ejs-splitbutton id="splitbutton" items="ViewBag.items" content="SplitButton" beforeClose="beforeClose"></ejs-splitbutton> function beforeClose(args) { /** code block */ } |
BeforeItemRender event | Not applicable |
Event: beforeItemRender <ejs-splitbutton id="splitbutton" items="ViewBag.items" content="SplitButton" beforeItemRender="beforeItemRender"></ejs-splitbutton> function beforeItemRender(args) { /** code block */ } |