Migration from Essential JS 1

17 Feb 20226 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

@Html.EJ().SplitButton("splitbutton").Text("login") 		Property: content

@Html.EJS().SplitButton("splitbutton").Content("Paste").Render()
Popup content Property: target

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target") 		Property: target

@Html.EJS().SplitButton("splitbutton").Content("Paste").Target("#target").Render()
Popup items Not applicable Property: items

@Html.EJS().SplitButton("splitbutton").Content("Paste").Items("ViewBag.items").Render()
Arrow position Property: arrowPosition

@Html.EJ().SplitButton("splitbutton").Text("login").Target("#target").ArrowPosition("@ArrowPosition.Left") 		Not applicable
Button mode Property: buttonMode

@Html.EJ().SplitButton("splitbutton").Text("login").Target("#target").ButtonMode("@ButtonMode.Dropdown") 		Not applicable
Content type Property: contentType

@Html.EJ().SplitButton("splitbutton").Text("login").Target("#target").ContentType("TextOnly") 		Not applicable
Icons Property: prefixIcon

@Html.EJ().SplitButton("splitbutton").Text("login").Target("#target").ContentType("TextAndImage").PrefixIcon("e-icon e-handup") 		Property: iconCss

@Html.EJS().SplitButton("splitbutton").Content("Paste").Target("#target").IconCss("e-icons e-paste").Render()
Icon position Property: imagePosition

@Html.EJ().SplitButton("splitbutton").Text("login").Target("#target").ContentType("TextAndImage").PrefixIcon("e-icon e-handup").ImagePosition("@ImagePosition.ImageTop") 		Property: iconPosition

@Html.EJS().SplitButton("splitbutton").Content("Paste").Item("ViewBag.items").IconCss("e-icons e-paste").IconPosition(Syncfusion.EJ2.SplitButtons.SplitButtonIconPosition.Top).Render()
Secondary icon Property: suffixIcon

@Html.EJ().SplitButton("splitbutton").Text("login").Target("#target").ContentType("TextAndImage").PrefixIcon("e-icon e-handup").SuffixIcon("e-icon e-palette") 		Not applicable
Adding custom class Property: cssClass

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target").CssClass("custom-class") 		Property: cssClass

@Html.EJS().SplitButton("splitbutton").Content("SplitButton").Item("ViewBag.items").CssClass("custom-class").Render()
Disabled state Property: enabled

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target").Enabled(false) 		Property: disabled

@Html.EJS().SplitButton("splitbutton").Content("SplitButton").Target("#target").Disabled(true).Render()
RTL Property: enableRTL

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target").EnableRTL(true) 		Property: enableRtl

@Html.EJS().SplitButton("splitbutton").Content("SplitButton").Item("ViewBag.items").EnableRtl(true).Render()
Height Property: height

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target").Height(30) 		Not applicable
Width Property: width

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target").Width(100) 		Not applicable
HTML attributes Property: htmlAttributes

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target").HtmlAttributes("") 		Not applicable
Show rounded corner Property: showRoundedCorner

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target").ShowRoundedCorner(true) 		Not applicable
Size Property: size

@Html.EJ().SplitButton("splitbutton").Text("Small").Target("#target").Size(ButtonSize.Small) 		Property: cssClass

@Html.EJS().SplitButton("splitbutton").Content("Small").Item("ViewBag.items").IconCss("e-small").Render()

Methods

Behavior API in Essential JS 1 API in Essential JS 2
Destroy method Method: destroy

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target")
var splitButton = $(“#splitbutton”).data(“ejSplitButton”);
splitButton.destroy();		 Method: destroy

@Html.EJS().SplitButton("splitbutton").Content("SplitButton").Item("ViewBag.items").Render()
var splitButton = document.getElementById(“splitbutton”).ej2_instances[0];
splitButton.destroy();
Disable method Method: disable

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target")
var splitButton = $(“#splitbutton”).data(“ejSplitButton”);
splitButton.disable();		 Not applicable
Enable method Method: enable

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target")
var splitButton = $(“#splitbutton”).data(“ejSplitButton”);
splitButton.enable();		 Not applicable
Hide popup Method: hide

<@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target")
var splitButton = $(“#splitbutton”).data(“ejSplitButton”);
splitButton.hide();		 Method: toggle

@Html.EJS().SplitButton("splitbutton").Content("SplitButton").Item("ViewBag.items").Render()
var splitButton = document.getElementById(“splitbutton”).ej2_instances[0];
splitButton.toggle();
Show popup Method: show

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target")
var splitButton = $(“#splitbutton”).data(“ejSplitButton”);
splitButton.show();		 Method: toggle

@Html.EJS().SplitButton("splitbutton").Content("SplitButton").Item("ViewBag.items").Render()
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

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target").BeforeOpen("beforeOpen")
function beforeOpen(args) {
     /** code block */
}		 Event: beforeOpen

@Html.EJS().SplitButton("splitbutton").Content("SplitButton").Item("ViewBag.items").BeforeOpen("beforeOpen").Render()
function beforeOpen(args) {
     /** code block */
}
Click event Event: click

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target").Click("click")
function click(args) {
     /** code block */
}		 Event: click

@Html.EJS().SplitButton("splitbutton").Content("SplitButton").Item("ViewBag.items").Click("click").Render()
function click(args) {
     /** code block */
}
Close event Event: close

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target").Close("close")
function close(args) {
     /** code block */
}		 Event: close

@Html.EJs().SplitButton("splitbutton").Content("SplitButton").Item("ViewBag.items").Close("close")
function close(args) {
     /** code block */
}
Create event Event: create

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target").Create("create")
function create(args) {
     /** code block */
}		 Event: created

@Html.EJS().SplitButton("splitbutton").Content("SplitButton").Item("ViewBag.items").Created("created").Render()
function created() {
     /** code block */
}
Destroy event Event: destroy

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target").Destroy("destroy")
function destroy(args) {
     /** code block */
}		 Not applicable
ItemMouseOut event Event: itemMouseOut

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target").ItemMouseOut("itemMouseOut")
function itemMouseOut(args) {
     /** code block */
}		 Not applicable
ItemMouseOver event Event: itemMouseOver

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target").ItemMouseOver("itemMouseOver")
function itemMouseOver(args) {
     /** code block */
}		 Not applicable
Item select event Event: itemSelected

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target").Item-selected("itemSelected")
function itemSelected(args) {
     /** code block */
}		 Event: select

@Html.EJS().SplitButton("splitbutton").Content("SplitButton").Item("ViewBag.items").Select("select").Render()
function select(args) {
     /** code block */
}
Open event Event: open

@Html.EJ().SplitButton("splitbutton").Text("SplitButton").Target("#target").Open("open")
function open(args) {
     /** code block */
}		 Event: open

@Html.EJS().SplitButton("splitbutton").Content("SplitButton").Item("ViewBag.items").Open("open").Render()
function open(args) {
     /** code block */
}
BeforeClose event Not applicable Event: beforeClose

@Html.EJS().SplitButton("splitbutton").Content("SplitButton").Item("ViewBag.items").BeforeClose("beforeClose").Render()
function beforeClose(args) {
     /** code block */
}
BeforeItemRender event Not applicable Event: beforeItemRender

@Html.EJS().SplitButton("splitbutton").Content("SplitButton").BeforeItemRender("beforeItemRender").Item("ViewBag.items").Render()
function beforeItemRender(args) {
     /** code block */
}