Migration from Essential JS 1

17 Feb 20225 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-radio-button id="radio" text="RadioButton" /> 		Property: label

<ejs-radiobutton id="radio" label="RadioButton"></ejs-radiobutton>
Checked state Property: checked

<ej-radio-button id="radio" text="RadioButton" checked="true" /> 		Property: checked

<ejs-radiobutton id="radio" label="RadioButton" checked="true"></ejs-radiobutton>
Adding custom css class Property: cssClass

<ej-radio-button id="radio" text="RadioButton" css-class="custom-class" /> 		Property: cssClass

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

<ej-radio-button id="radio" text="RadioButton" enabled="false"/ /> 		Property: disabled

<ejs-radiobutton id="radio" label="RadioButton" disabled="true"></ejs-radiobutton>
State persistence Property: enablePersistence

<ej-radio-button id="radio" text="RadioButton" enable-persistence="true"/ /> 		Property: enablePersistence

<ejs-radiobutton id="radio" label="RadioButton" enablePersistence="true"></ejs-radiobutton>
RTL Property: enableRTL

<ej-radio-button id="radio" text="RadioButton" enable-rtl="true"/ /> 		Property: enableRtl

<ejs-radiobutton id="radio" label="RadioButton" enableRtl="true"></ejs-radiobutton>
HTML Attributes Property: htmlAttributes

<ej-radio-button id="radio" text="RadioButton" html-attributes="" /> 		Not applicable
Id property Property: id

<ej-radio-button id="sync" /> 		Not applicable
Prefix value of Id Property: idPrefix

<ej-radio-button id-prefix="ej" /> 		Not applicable
Name attribute Property: name

<ej-radio-button id="radio" name="gender" checked="true" text="Male" /> 		Property: name

<ejs-radiobutton id="radio" name="gender" checked="true" label="Male"></ejs-radiobutton>
Value attribute Property: value

<ej-radio-button id="radio" name="gender" checked="true" value="male" text="Male" /> 		Property: value

<ejs-radiobutton id="radio" name="gender" checked="true" value="male" label="Male"></ejs-radiobutton>
Size Property: size

<ej-radio-button id="radio" size="@RadioButtonSize.Small" text="RadioButton" /> 		Property: cssClass

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

<ej-radio-button id="radio" text="RadioButton" validation-rules="ViewBag.rules" /> 		Not applicable
Validation message Property: validationMessage

<ej-radio-button id="radio" text="RadioButton" validation-rules="ViewBag.rules" validation-message="ViewBag.message" /> 		Not applicable

Methods

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

<ej-radio-button id="radio" text="RadioButton" />
var radioButton = $(“#radio”).data(“ejRadioButton”);
radioButton.destroy();		 Method: destroy

<ejs-radiobutton id="radio" label="RadioButton"></ejs-radiobutton>
var radioButton = document.getElementById(‘radio’).ej2_instances[0];
radioButton.destroy();
Disable the RadioButton Method: disable

<ej-radio-button id="radio" text="RadioButton" />
var radioButton = $(“#radio”).data(“ejRadioButton”);
radioButton.disable();		 Not applicable
Enable the RadioButton Method: enable

<ej-radio-button id="radio" text="RadioButton" />
var radioButton = $(“#radio”).data(“ejRadioButton”);
radioButton.enable();		 Not applicable

Events

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

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

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

<ejs-radiobutton id="radio" label="RadioButton" change="change"></ejs-radiobutton>
function change(args) {
    /** code block */
}
Create Event Event: create

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

<ejs-radiobutton id="radio" label="RadioButton" created="created"></ejs-radiobutton>
function created() {
    /** code block */
}
Destroy Event Event: destroy

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