Contents
- Properties
- Methods
- Events
Having trouble getting help?
Contact Support
Contact Support
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 |