Contents
- Properties
- Methods
- Events
Having trouble getting help?
Contact Support
Contact Support
Ej1 api migration in React Radio button component
17 Mar 20255 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 |