Ej1 api migration in React Radio button component

30 Jan 20235 minutes to read

This article describes the API migration process of RadioButton component from Essential JS 1 to Essential JS 2.

Properties

Behavior API in Essential JS 1 API in Essential JS 2
Label Property: text

<EJ.RadioButton id="radio" text="RadioButton"></EJ.RadioButton> 		Property: label

<RadioButtonComponent id="radio" label="RadioButton"></RadioButtonComponent>
Checked state Property: checked

<EJ.RadioButton id="radio" text="RadioButton" checked={true}></EJ.RadioButton> 		Property: checked

<RadioButtonComponent id="radio" label="RadioButton" checked={true}></RadioButtonComponent>
Adding custom css class Property: cssClass

<EJ.RadioButton id="radio" text="RadioButton" cssClass="custom-class"></EJ.RadioButton> 		Property: cssClass

<RadioButtonComponent id="radio" label="RadioButton" cssClass="custom-class"></RadioButtonComponent>
Disabled state Property: enabled

<EJ.RadioButton id="radio" text="RadioButton" enabled={false}></EJ.RadioButton> 		Property: disabled

<RadioButtonComponent id="radio" label="RadioButton" disabled={true}></RadioButtonComponent>
State persistence Property: enablePersistence

<EJ.RadioButton id="radio" text="RadioButton" enablePersistence={true}></EJ.RadioButton> 		Property: enablePersistence

<RadioButtonComponent id="radio" label="RadioButton" enablePersistence={true}></RadioButtonComponent>
RTL Property: enableRTL

<EJ.RadioButton id="radio" text="RadioButton" enableRTL={true}></EJ.RadioButton> 		Property: enableRtl

<RadioButtonComponent id="radio" label="RadioButton" enableRtl={true}></RadioButtonComponent>
HTML Attributes Property: htmlAttributes

var attributes = { required:”required” };
<EJ.RadioButton id="radio" text="RadioButton" htmlAttributes={attributes}></EJ.RadioButton> 		Not applicable
Id property Property: id

<EJ.RadioButton id="sync"></EJ.RadioButton> 		Not applicable
Prefix value of Id Property: idPrefix

<EJ.RadioButton id="radio" idPrefix="react"></EJ.RadioButton> 		Not applicable
Name attribute Property: name

<EJ.RadioButton id="radio" name="gender" checked={true} text="Male"></EJ.RadioButton> 		Property: name

<RadioButtonComponent id="radio" name="gender" checked={true} label="Male"></RadioButtonComponent>
Value attribute Property: value

<EJ.RadioButton id="radio" name="gender" checked={true} value="male" text="Male"></EJ.RadioButton> 		Property: value

<RadioButtonComponent id="radio" name="gender" checked={true} value="male" label="Male"></RadioButtonComponent>
Size Property: size

<EJ.RadioButton id="radio" size="small" text="RadioButton"></EJ.RadioButton> 		Property: cssClass

<RadioButtonComponent id="radio" label="RadioButton" cssClass="e-small"></RadioButtonComponent>
Validation rules Property: validationRules

var rules = { required: true };
<EJ.RadioButton id="radio" text="RadioButton" validationRules={rules}></EJ.RadioButton> 		Not applicable
Validation message Property: validationMessage

var rules = { required: true };
var message = { required: “Required RadioButton value” };
<EJ.RadioButton id="radio" text="RadioButton" validationRules={rules} validationMessage={message}></EJ.RadioButton> 		Not applicable

Methods

Behavior API in Essential JS 1 API in Essential JS 2
Destroy Method: destroy

<EJ.RadioButton id="radio" text="RadioButton"></EJ.RadioButton>
var radioButton = $(‘#radio’).ejRadioButton(‘instance’);
radioButton.destroy();		 Method: destroy

<RadioButtonComponent id="radio" label="RadioButton" ref={(scope) => {this.radioButton = scope}></RadioButtonComponent>
constructor(props: {}) {
  this.radioButton.destroy();
}
Disable the RadioButton Method: disable

<EJ.RadioButton id="radio" text="RadioButton"></EJ.RadioButton>
var radioButton = $(‘#radio’).ejRadioButton(‘instance’);
radioButton.disable();		 Not applicable
Enable the RadioButton Method: enable

<EJ.RadioButton id="radio" text="RadioButton"></EJ.RadioButton>
var radioButton = $(‘#radio’).ejRadioButton(‘instance’);
radioButton.enable();		 Not applicable

Events

Behavior API in Essential JS 1 API in Essential JS 2
BeforeChange Event Event: beforeChange

<EJ.RadioButton id="radio" text="RadioButton" beforeChange={beforeChange}></EJ.RadioButton>
function beforeChange(args) {
    /** code block */
}		 Not applicable
Change Event Event: change

<EJ.RadioButton id="radio" text="RadioButton" change={change}></EJ.RadioButton>
function change(args) {
    /** code block */
}		 Event: change

<RadioButtonComponent id="radio" label="RadioButton" change={this.change.bind(this)}></RadioButtonComponent>
change(args) {
    /** code block */
}
Create Event Event: create

<EJ.RadioButton id="radio" text="RadioButton" create={create}></EJ.RadioButton>
function create(args) {
    /** code block */
}		 Event: created

<RadioButtonComponent id="radio" label="RadioButton" created={this.created.bind(this)}></RadioButtonComponent>
created() {
    /** code block */
}
Destroy Event Event: destroy

<EJ.RadioButton id="radio" text="RadioButton" destroy={destroy}></EJ.RadioButton>
function destroy(args) {
    /** code block */
}		 Not applicable