Ej1 api migration in EJ2 TypeScript Split button control

2 May 202310 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

new ej.SplitButton($(“#splitbutton”), {
target: “#target”,
text: “Split Button”
});		 Property: content

let splitButton: SplitButton= new SplitButton({
content: “Split Button”
});
splitButton.appendTo(“#splitbutton”);
Popup content Property: target

new ej.SplitButton($(“#splitbutton”), {
target: “#target”,
text: “Split Button”
});		 Property: target

let splitButton: SplitButton= new SplitButton({
target: “#target”,
content: “Split Button”
});
splitButton.appendTo(“#splitbutton”);
Popup items Not applicable Property: items

let splitButton: SplitButton= new SplitButton({
items: items,
content: “Split Button”
});
splitButton.appendTo(“#splitbutton”);
let items: ItemModel[] = [
  {
    text: ‘Cut’
  },
  {
    text: ‘Copy’
  },
  {
    text: ‘Paste’
  }
];
Arrow position Property: arrowPosition

new ej.SplitButton($(“#splitbutton”), {
arrowPosition: ej.ArrowPosition.Left,
target: “#target”,
text: “Split Button”
});		 Not applicable
Button mode Property: buttonMode

new ej.SplitButton($(“#splitbutton”), {
buttonMode: ej.ButtonMode.Dropdown,
target: “#target”,
text: “Split Button”
});		 Not applicable
Content type Property: contentType

new ej.SplitButton($(“#splitbutton”), {
contentType: ej.ContentType.TextOnly,
text:”login”,
target: “#target”
});		 Not applicable
Adding custom css class Property: cssClass

new ej.SplitButton($(“#splitbutton”), {
cssClass: “e-custom-class”,
target: “#target”,
text: “Split Button”
});		 Property: cssClass

let splitButton: SplitButton= new SplitButton({
cssClass: “e-custom-class”,
items: items,
content: “Split Button”
});
splitButton.appendTo(“#splitbutton”);
Disabled state Property: enabled

new ej.SplitButton($(“#splitbutton”), {
enabled: false,
target: “#target”,
text: “Split Button”
});		 Property: disabled

let splitButton: SplitButton= new SplitButton({
disabled: true,
items: items,
content: “Split Button”
});
splitButton.appendTo(“#splitbutton”);
RTL Property: enableRTL

new ej.SplitButton($(“#splitbutton”), {
enableRTL: true,
target: “#target”,
text: “Split Button”
});		 Property: enableRtl

let splitButton: SplitButton= new SplitButton({
enableRtl: true,
items: items,
content: “Split Button”
});
splitButton.appendTo(“#splitbutton”);
Height Property: height

new ej.SplitButton($(“#splitbutton”), {
height: 30,
target: “#target”,
text: “Split Button”
});		 Not applicable
Width Property: width

new ej.SplitButton($(“#splitbutton”), {
width: 100,
target: “#target”,
text: “Split Button”
});		 Not applicable
HTML attributes Property: htmlAttributes

new ej.SplitButton($(“#splitbutton”), {
htmlAttributes : { disabled:”disabled” },
target: “#target”,
text: “Split Button”
});		 Not applicable
Icons Property: prefixIcon

new ej.SplitButton($(“#splitbutton”), {
prefixIcon:”e-icon e-handup”,
contentType: ej.ContentType.TextAndImage,
target: “#target”,
text: “Split Button”
});		 Property: iconCss

let splitButton: SplitButton= new SplitButton({
iconCss: ‘e-icons e-handup’,
content: “Split Button”
});
splitButton.appendTo(“#splitbutton”);
Icon position Property: imagePosition

new ej.SplitButton($(“#splitbutton”), {
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon:”e-icon e-handup”,
contentType: ej.ContentType.TextAndImage,
target: “#target”,
text: “Split Button”
});		 Property: iconPosition

let splitButton: SplitButton= new SplitButton({
iconPosition: “Top”,
iconCss: ‘e-icons e-handup’,
content: “Split Button”
});
splitButton.appendTo(“#splitbutton”);
Secondary icon Property: suffixIcon

new ej.SplitButton($(“#splitbutton”), {
suffixIcon:”e-icon e-icon-closed”,
prefixIcon:”e-icon e-handup”,
contentType: ej.ContentType.ImageTextImage,
target: “#target”,
text: “Split Button”
});		 Not applicable
Show rounded corner Property: showRoundedCorner

new ej.SplitButton($(“#splitbutton”), {
showRoundedCorner: true,
target: “#target”,
text: “Split Button”
});		 Not applicable
Size Property: size

new ej.SplitButton($(“#splitbutton”), {
size: ej.ButtonSize.Small,
target: “#target”,
text: “Split Button”
});		 Property: cssClass

let splitButton: SplitButton= new SplitButton({
cssClass: “e-small”,
content: “Split Button”
});
splitButton.appendTo(“#splitbutton”);

Methods

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

var splitButton = new ej.SplitButton($(“#splitbutton”), {
target: “#target”,
text: “Split Button”
});
splitButton.destroy();		 Method: destroy

let splitButton: SplitButton= new SplitButton({
content: “Split Button”
});
splitButton.appendTo(“#splitbutton”);
splitButton.destroy();
Disable method Method: disable

var splitButton = new ej.SplitButton($(“#splitbutton”), {
target: “#target”,
text: “Split Button”
});
splitButton.disable();		 Not applicable
Enable method Method: enable

var splitButton = new ej.SplitButton($(“#splitbutton”), {
target: “#target”,
text: “Split Button”
});
splitButton.enable();		 Not applicable
Hide popup Method: hide

var splitButton = new ej.SplitButton($(“#splitbutton”), {
target: “#target”,
text: “Split Button”
});
splitButton.hide();		 Method: toggle

let splitButton: SplitButton= new SplitButton({
items: items,
content: “Split Button”
});
splitButton.appendTo(“#splitbutton”);
splitButton.toggle();
Show popup Method: show

var splitButton = new ej.SplitButton($(“#splitbutton”), {
target: “#target”,
text: “Split Button”
});
splitButton.show();		 Method: toggle

let splitButton: SplitButton= new SplitButton({
items: items,
content: “Split Button”
});
splitButton.appendTo(“#splitbutton”);
splitButton.toggle();

Events

Behavior API in Essential JS 1 API in Essential JS 2
BeforeOpen event Event: beforeOpen

var splitButton = new ej.SplitButton($(“#splitbutton”), {
beforeOpen: function(args) { /** code block */ },
target: “#target”,
text: “Split Button”
});		 Event: beforeOpen

let splitButton: SplitButton= new SplitButton({
beforeOpen: (args) => { /** code block */ },
items: items,
content: “Split Button”
});
splitButton.appendTo(“#splitbutton”);
Click event Event: click

var splitButton = new ej.SplitButton($(“#splitbutton”), {
click: function(args) { /** code block */ },
target: “#target”,
text: “Split Button”
});		 Event: click

let splitButton: SplitButton= new SplitButton({
click: (args) => { /** code block */ },
items: items,
content: “Split Button”
});
splitButton.appendTo(“#splitbutton”);
Close event Event: close

var splitButton = new ej.SplitButton($(“#splitbutton”), {
close: function(args) { /** code block */ },
target: “#target”,
text: “Split Button”
});		 Event: close

let splitButton: SplitButton= new SplitButton({
close: (args) => { /** code block */ },
items: items,
content: “Split Button”
});
splitButton.appendTo(“#splitbutton”);
Create event Event: create

var splitButton = new ej.SplitButton($(“#splitbutton”), {
create: function(args) { /** code block */ },
target: “#target”,
text: “Split Button”
});		 Event: created

let splitButton: SplitButton= new SplitButton({
created: () => { /** code block */ },
items: items,
content: “Split Button”
});
splitButton.appendTo(“#splitbutton”);
Destroy event Event: destroy

var splitButton = new ej.SplitButton($(“#splitbutton”), {
destroy: function(args) { /** code block */ },
target: “#target”,
text: “Split Button”
});		 Not applicable
ItemMouseOut event Event: itemMouseOut

var splitButton = new ej.SplitButton($(“#splitbutton”), {
itemMouseOut: function(args) { /** code block */ },
target: “#target”,
text: “Split Button”
});		 Not applicable
ItemMouseOver event Event: itemMouseOver

var splitButton = new ej.SplitButton($(“#splitbutton”), {
itemMouseOver: function(args) { /** code block */ },
target: “#target”,
text: “Split Button”
});		 Not applicable
Item select event Event: itemSelected

var splitButton = new ej.SplitButton($(“#splitbutton”), {
itemSelected: function(args) { /** code block */ },
target: “#target”,
text: “Split Button”
});		 Event: select

let splitButton: SplitButton= new SplitButton({
select: (args) => { /** code block */ },
target: “#target”,
content: “Split Button”
});
splitButton.appendTo(“#splitbutton”);
Open event Event: open

var splitButton = new ej.SplitButton($(“#splitbutton”), {
open: function(args) { /** code block */ },
target: “#target”,
text: “Split Button”
});		 Event: open

let splitButton: SplitButton= new SplitButton({
open: (args) => { /** code block */ },
items: items,
content: “Split Button”
});
splitButton.appendTo(“#splitbutton”);
BeforeClose event Not applicable Event: beforeClose

let splitButton: SplitButton= new SplitButton({
beforeClose: (args) => { /** code block */ },
items: items,
content: “Split Button”
});
splitButton.appendTo(“#splitbutton”);
BeforeItemRender event Not applicable Event: beforeItemRender

let splitButton: SplitButton= new SplitButton({
beforeItemRender: (args) => { /** code block */ },
items: items,
content: “Split Button”
});
splitButton.appendTo(“#splitbutton”);