Migration from Essential JS 1
17 Feb 20226 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 |