Ej1 api migration in EJ2 JavaScript Split button control

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$(“#splitbutton”).ejSplitButton({
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

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

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

var splitButton = new ej.splitbuttons.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

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

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

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

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

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

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

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

var splitButton = new ej.splitbuttons.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

$(“#splitbutton”).ejSplitButton({
beforeOpen: function(args) { /** code block */ },
target: “#target”,
text: “Split Button”
});		 Event: beforeOpen

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

$(“#splitbutton”).ejSplitButton({
click: function(args) { /** code block */ },
target: “#target”,
text: “Split Button”
});		 Event: click

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

$(“#splitbutton”).ejSplitButton({
close: function(args) { /** code block */ },
target: “#target”,
text: “Split Button”
});		 Event: close

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

$(“#splitbutton”).ejSplitButton({
create: function(args) { /** code block */ },
target: “#target”,
text: “Split Button”
});		 Event: created

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

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

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

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

$(“#splitbutton”).ejSplitButton({
itemSelected: function(args) { /** code block */ },
target: “#target”,
text: “Split Button”
});		 Event: select

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

$(“#splitbutton”).ejSplitButton({
open: function(args) { /** code block */ },
target: “#target”,
text: “Split Button”
});		 Event: open

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

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

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