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"></EJ.Button> |
Property: content <ButtonComponent id="btn" content="Button"></ButtonComponent> |
| Specifies the content type of the button | Property: ContentType <EJ.Button id="btn" text="Save" contentType="textandimage" prefixIcon="e-icon e-save"></EJ.Button> |
Not applicable |
| Specifies icon for the button | Property: prefixIcon <EJ.Button id="btn" contentType="imageonly" prefixIcon="e-icon e-save"></EJ.Button> |
Property: iconCss <ButtonComponent id="btn" iconCss="e-icons e-save"></ButtonComponent> |
| Positioning icon in the button | Property: imagePosition <EJ.Button id="btn" contentType="textandimage" text="Save" prefixIcon="e-icon e-save" imagePosition="imageright"></EJ.Button> |
Property: iconPosition <ButtonComponent id="btn" content="Save" iconCss="e-icons e-save" iconPosition="Right"></ButtonComponent> |
| Specifies secondary icon for the button | Property: suffixIcon <EJ.Button id="btn" text="FileSearch" contentType="imagetextimage" prefixIcon="e-icon e-search" suffixIcon="e-icon e-file-html"></EJ.Button> |
Not applicable |
| Adding custom class | Property: cssClass <EJ.Button id="btn" text="Button" cssClass="custom-class"></EJ.Button> |
Property: cssClass <ButtonComponent id="btn" cssClass="custom-class" content="Button"></ButtonComponent> |
| Specifies the size of the button | Property: size <EJ.Button id="btn" text="Button" size="small"></EJ.Button> |
Property: cssClass <ButtonComponent id="btn" cssClass="e-small" content="Button"></ButtonComponent> |
| Triggers click event repeatedly while pressing the button | Property: repeatButton <EJ.Button id="btn" text="Click" repeatButton={true}></EJ.Button> |
Not applicable |
| Sets time interval between two consecutive click event on the repeat button | Property: timeInterval <EJ.Button id="btn" text="Click" repeatButton={true} timeInterval="100"></EJ.Button> |
Not applicable |
| Specifies the type of the button | Property: type <EJ.Button id="btn" text="Submit" buttonType="submit"></EJ.Button> |
Not applicable |
| Changes normal button into rounded corner | Property: showRoundedCorner <EJ.Button id="btn" text="Button" showRoundedCorner={true}></EJ.Button> |
Not applicable |
| Specifies the width of the button | Property: width <EJ.Button id="btn" text="Button" width="150px"></EJ.Button> |
Not applicable |
| Specifies the height of the button | Property: height <EJ.Button id="btn" text="Button" height="50px"></EJ.Button> |
Not applicable |
| Adds HTML attributes to the button | Property: htmlAttributes var attributes = { disabled: “disabled” }; <EJ.Button id="btn" text="Button" htmlAttributes={attributes}></EJ.Button> |
Not applicable |
| Allows the appearance of the Button to be enhanced and visually appealing | Not applicable | Property: isPrimary <ButtonComponent id="btn" isPrimary={true} content="Button"></ButtonComponent> |
| Makes the button toggle from normal to active state | Property: isToggle Not applicable |
Property: isToggle <ButtonComponent id="btn" isToggle={true} content="Play"></ButtonComponent> |
| Specifies the disabled state of the button | Property: enabled <EJ.Button id="btn" text="Button" enabled={false}></EJ.Button> |
Property: disabled <ButtonComponent id="btn" disabled={true} content="Button"></ButtonComponent> |
| Enable or disable rendering component in right to left direction | Property: enableRTL <EJ.Button id="btn" contentType="textandimage" text="Save" prefixIcon="e-icon e-save" enableRTL={true}></EJ.Button> |
Property: enableRtl <ButtonComponent id="btn" enableRtl={true} content="Save" iconCss="e-icons e-save"></ButtonComponent> |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Destroys the control | Methods: destroy <EJ.Button id="btn" text="Button"></EJ.Button> var btnObj = $(‘#btn’).ejButton(‘instance’); btnObj.destroy(); |
Methods: destroy <ButtonComponent id="btn" content="Button" ref={(scope) => {this.btnObj = scope}></ButtonComponent> constructor(props: {}) { this.btnObj.destroy(); } |
| Disables the button | Methods: disable <EJ.Button id="btn" text="Button"></EJ.Button> var btnObj = $(‘#btn’).ejButton(‘instance’); btnObj.disable(); |
Not applicable |
| Enables the button | Methods: enable <EJ.Button id="btn" text="Button"></EJ.Button> var btnObj = $(‘#btn’).ejButton(‘instance’); 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}></EJ.Button> function btnClick(args) { /** code block */ } |
Not applicable |
| Triggers once the component rendering is completed | Events: create <EJ.Button id="btn" text="Button" click={create}></EJ.Button> function create(args) { /** code block */ } |
Events: created <ButtonComponent id="btn" content="Button" created={this.created.bind(this)}></ButtonComponent>created() { /** code block */ } |
| Triggers once the component is destroyed | Events: destroy <EJ.Button id="btn" text="Button" destroy={destroy}></EJ.Button> function destroy(args) { /** code block */ } |
Not applicable |