This article describes the API migration process of Button component from Essential JS 1 to Essential JS 2.
| 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> |
| 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 |
| 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 |