Ej1 api migration in EJ2 TypeScript Button control

2 May 20236 minutes to read

This article describes the API migration process of Button 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 button Property: text

new ej.Button($(“#button”), {
text: “Button”
});		 Property: content

let button: Button = new Button({
content: “Button”
});
button.appendTo(“#button”);
Specifies the content type of the button Property: ContentType

new ej.Button($(“#button”), {
contentType: ej.ContentType.TextAndImage,
prefixIcon: “e-icon e-save”,
text: “Save”
});		 Not applicable
Specifies icon for the button Property: prefixIcon

new ej.Button($(“#button”), {
contentType: ej.ContentType.ImageOnly,
prefixIcon: “e-icon e-save”
});		 Property: iconCss

let button: Button = new Button({
iconCss: “e-icons e-save”
});
button.appendTo(“#button”);
Positioning icon in the button Property: imagePosition

new ej.Button($(“#button”), {
imagePosition: ej.ImagePosition.ImageRight,
contentType: ej.ContentType.TextAndImage,
prefixIcon: “e-icon e-save”,
text: “Save”
});		 Property: iconPosition

let button: Button = new Button({
iconCss: “e-icons e-save”,
iconPosition: “Right”,
content: “Save”
});
button.appendTo(“#button”);
Specifies secondary icon for the button Property: suffixIcon

new ej.Button($(“#button”), {
contentType: ej.ContentType.ImageTextImage,
suffixIcon: “e-icon e-file-html”,
prefixIcon: “e-icon e-search”,
text: “FileSearch”
});		 Not applicable
Specifies the size of the button Property: size

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

let button: Button = new Button({
cssClass: “e-small”,
content: “Button”
});
button.appendTo(“#button”);
Adding custom css class Property: cssClass

new ej.Button($(“#button”), {
cssClass: “custom-class”,
text: “Button”
});		 Property: cssClass

let button: Button = new Button({
cssClass: “custom-class”,
content: “Button”
});
button.appendTo(“#button”);
Triggers click event repeatedly while pressing the button Property: repeatButton

new ej.Button($(“#button”), {
repeatButton: true,
text: “Button”
});		 Not applicable
Sets time interval between two consecutive click event on the repeat button Property: timeInterval

new ej.Button($(“#button”), {
repeatButton: true,
timeInterval : “100”,
text: “Button”
});		 Not applicable
Specifies the type of the button Property: type

new ej.Button($(“#button”), {
type: ej.ButtonType.Submit,
text: “Submit”
});		 Not applicable
Changes normal button into rounded corner Property: showRoundedCorner

new ej.Button($(“#button”), {
showRoundedCorner: true,
text: “Button”
});		 Not applicable
Specifies the width of the button Property: width

new ej.Button($(“#button”), {
width: “150px”,
text: “Button”
});		 Not applicable
Specifies the height of the button Property: height

new ej.Button($(“#button”), {
height: “30px”,
text: “Button”
});		 Not applicable
Adds HTML attributes to the button Property: htmlAttributes

new ej.Button($(“#button”), {
htmlAttributes : { disabled:”disabled” },
text: “Button”
});		 Not applicable
Allows the appearance of the Button to be enhanced and visually appealing Not applicable Property: isPrimary

let button: Button = new Button({
isPrimary: true,
content: “Button”
});
button.appendTo(“#button”);
Makes the button toggle from normal to active state Not applicable Property: isToggle

let button: Button = new Button({
isToggle: true,
content: “Button”
});
button.appendTo(“#button”);
Specifies the disabled state of the button Property: enabled

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

let button: Button = new Button({
disabled: true,
content: “Button”
});
button.appendTo(“#button”);
Enable or disable rendering component in right to left direction Property: enableRTL

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

let button: Button = new Button({
enableRtl: true,
content: “Button”
});
button.appendTo(“#button”);

Methods

Behavior API in Essential JS 1 API in Essential JS 2
Destroys the control Methods: destroy

var button = new ej.Button($(“#button”), {
text: “Button”
});
button.destroy();		 Methods: destroy

let button: Button = new Button({
content: “Button”
});
button.appendTo(“#button”);
button.destroy();
Disables the button Methods: disable

var button = new ej.Button($(“#button”), {
text: “Button”
});
button.disable();		 Not applicable
Enables the button Methods: enable

var button = new ej.Button($(“#button”), {
enabled: false,
text: “Button”
});
button.enable();		 Not applicable

Events

Behavior API in Essential JS 1 API in Essential JS 2
Triggers while clicking the button Events: click

var button = new ej.Button($(“#button”), {
text: “Button”,
click: function(args) { /** code block */ }
});		 Not applicable
Triggers once the component rendering is completed Events: create

var button = new ej.Button($(“#button”), {
text: “Button”,
create: function(args) { /** code block */ }
});		 Events: created

let button: Button = new Button({
content: “Button”,
created: () => { /** code block */ }
});
button.appendTo(“#button”);
Triggers once the component is destroyed Events: destroy

var button = new ej.Button($(“#button”), {
text: “Button”,
destroy: function(args) { /** code block */ }
});		 Not applicable