Ej1 api migration in EJ2 JavaScript 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

var button = new ej.buttons.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

$(“#button”).ejButton({
text: “Button”
});
var button = $(“#button”).data(“ejButton”);
button.destroy();		 Methods: destroy

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

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

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

Events

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

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

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

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

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