Migration from Essential® JS 1

8 Dec 20246 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

<ej-button id="btn" text="Button" /> 		Property: content

<ejs-button id="btn" content="Button"></ejs-button>
Specifies the content type of the button Property: ContentType

<ej-button id="btn" text="Save" content-type="@ContentType.TextAndImage" prefix-icon="e-icon e-save" /> 		Not applicable
Specifies icon for the button Property: prefixIcon

<ej-button id="btn" content-type="@ContentType.ImageOnly" prefix-icon="e-icon e-save" /> 		Property: iconCss

<ejs-button id="btn" iconCss="e-icons e-save"></ejs-button>
Positioning icon in the button Property: imagePosition

<ej-button id="btn" content-type="@ContentType.TextAndImage" text="Save" prefix-icon="e-icon e-save" image-position="@ImagePosition.ImageRight" /> 		Property: iconPosition

<ejs-button id="btn" content="Save" iconCss="e-icons e-save" iconPosition="Right"></ejs-button>
Specifies secondary icon for the button Property: suffixIcon

<ej-button id="btn" text="FileSearch" content-type="@ContentType.ImageTextImage" prefix-icon="e-icon e-search" suffix-icon="e-icon e-file-html" /> 		Not applicable
Adding custom class Property: cssClass

<ej-button id="btn" text="Button" css-class="custom-class" /> 		Property: cssClass

<ejs-button id="btn" cssClass="custom-class" content="Button"></ejs-button>
Specifies the size of the button Property: size

<ej-button id="btn" text="Button" size="@ButtonSize.Small" /> 		Property: cssClass

<ejs-button id="btn" cssClass="e-small" content="Button"></ejs-button>
Triggers click event repeatedly while pressing the button Property: repeatButton

<ej-button id="btn" text="Click" repeat-button="true" /> 		Not applicable
Sets time interval between two consecutive click event on the repeat button Property: timeInterval

<ej-button id="btn" text="Click" repeat-button="true" time-interval="100" /> 		Not applicable
Specifies the type of the button Property: type

<ej-button id="btn" text="Submit" button-type="@ButtonType.Submit" /> 		Not applicable
Changes normal button into rounded corner Property: showRoundedCorner

<ej-button id="btn" text="Button" show-rounded-corner="true" /> 		Not applicable
Specifies the width of the button Property: width

<ej-button id="btn" text="Button" width="150px" /> 		Not applicable
Specifies the height of the button Property: height

<ej-button id="btn" text="Button" height="50px" /> 		Not applicable
Adds HTML attributes to the button Property: htmlAttributes

<ej-button id="btn" text="Button" html-attributes="" /> 		Not applicable
Allows the appearance of the Button to be enhanced and visually appealing Not applicable Property: isPrimary

<ejs-button id="btn" isPrimary="true" content="Button"></ejs-button>
Makes the button toggle from normal to active state Property: isToggle

Not applicable		 Property: isToggle

<ejs-button id="btn" isToggle="true" content="Play"></ejs-button>
Specifies the disabled state of the button Property: enabled

<ej-button id="btn" text="Button" enabled="false" /> 		Property: disabled

<ejs-button id="btn" disabled="true" content="Button"></ejs-button>
Enable or disable rendering component in right to left direction Property: enableRTL

<ej-button id="btn" content-type="@ContentType.TextAndImage" text="Save" prefix-icon="e-icon e-save" enable-rtl="true" /> 		Property: enableRtl

<ejs-button id="btn" enableRtl="true" content="Save" iconCss="e-icons e-save"></ejs-button>

Methods

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

<ej-button id="btn" text="Button" />
var btnObj = $(“#btn”).data(“ejButton”);
btnObj.destroy();		 Methods: destroy

<ejs-button id="btn" content="Button"></ejs-button>
var btnObj = document.getElementById(“btn”).ej2_instances[0];
btnObj.destroy();
Disables the button Methods: disable

<ej-button id="btn" text="Button" />
var btnObj = $(“#btn”).data(“ejButton”);
btnObj.disable();		 Not applicable
Enables the button Methods: enable

<ej-button id="btn" text="Button" />
var btnObj = $(“#btn”).data(“ejButton”);
btnObj.enable();		 Not applicable

Events

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

<ej-button id="btn" text="Button" click="btnClick" />
function btnClick(args) {
/** code block */
}		 Not applicable
Triggers once the component rendering is completed Events: create

<ej-button id="btn" text="Button" click="create" />
function create(args) {
/** code block */
}		 Events: created

<ejs-button id="btn" content="Button" created="created"></ejs-button>
function created() {
/** code block */
}
Triggers once the component is destroyed Events: destroy

<ej-button id="btn" text="Button" destroy="destroy" />
function destroy(args) {
/** code block */
}		 Not applicable