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 */
}