Ej1 api migration in EJ2 TypeScript Radio button control

2 May 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
RadioButton Label Property: text

new ej.RadioButton($(“#radiobutton”), {
text: “RadioButton”
});		 Property: label

let radioButton: RadioButton= new RadioButton({
label: “RadioButton”
});
radioButton.appendTo(“#radiobutton”);
Checked state Property: checked

new ej.RadioButton($(“#radiobutton”), {
checked: true
});		 Property: checked

let radioButton: RadioButton= new RadioButton({
checked: true
});
radioButton.appendTo(“#radiobutton”);
Adding custom class Property: cssClass

new ej.RadioButton($(“#radiobutton”), {
cssClass: “custom-class”
});		 Property: cssClass

let radioButton: RadioButton= new RadioButton({
cssClass: “custom-class”
});
radioButton.appendTo(“#radiobutton”);
Disabled state Property: enabled

new ej.RadioButton($(“#radiobutton”), {
enabled: false
});		 Property: disabled

let radioButton: RadioButton= new RadioButton({
disabled: true
});
radioButton.appendTo(“#radiobutton”);
State persistence Property: enablePersistence

new ej.RadioButton($(“#radiobutton”), {
enablePersistence: true
});		 Property: enablePersistence

let radioButton: RadioButton= new RadioButton({
enablePersistence: true
});
radioButton.appendTo(“#radiobutton”);
RTL Property: enableRTL

new ej.RadioButton($(“#radiobutton”), {
enableRTL: true,
text: “RadioButton”
});		 Property: enableRtl

let radioButton: RadioButton= new RadioButton({
enableRtl: true,
label: “RadioButton”
});
radioButton.appendTo(“#radiobutton”);
HTML Attributes Property: htmlAttributes

new ej.RadioButton($(“#radiobutton”), {
htmlAttributes : { required:”required” },
text: “RadioButton”
});		 Not applicable
Id property Property: id

new ej.RadioButton($(“#radiobutton”), {
id: “sync”
});		 Not applicable
Prefix value of Id Property: idPrefix

new ej.RadioButton($(“#radiobutton”), {
idPrefix: “ej”
});		 Not applicable
Name attribute Property: name

new ej.RadioButton($(“#radiobutton”), {
name: “sports”
});		 Property: name

let radioButton: RadioButton= new RadioButton({
name: “sports”
});
radioButton.appendTo(“#radiobutton”);
Value attribute Property: value

new ej.RadioButton($(“#radiobutton”), {
value: “football”,
name: “sports”
});		 Property: value

let radioButton: RadioButton= new RadioButton({
value: “football”,
name: “sports”
});
radioButton.appendTo(“#radiobutton”);
Size Property: size

new ej.RadioButton($(“#radiobutton”), {
size: “small”
});		 Property: cssClass

let radioButton: RadioButton= new RadioButton({
cssClass: “e-small”
});
radioButton.appendTo(“#radiobutton”);
Validation rules Property: validationRules

new ej.RadioButton($(“#radiobutton”), {
validationRules:{ required:true }
});		 Not applicable
Validation message Property: validationMessage

new ej.RadioButton($(“#radiobutton”), {
validationRules:{ required:true },
validationMessage: { required: “Required RadioButton value” }
});		 Not applicable

Methods

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

var radioButton = new ej.RadioButton($(“#radiobutton”), {
text: “RadioButton”
});
radioButton.destroy()		 Method: destroy

let radioButton: RadioButton= new RadioButton({
label: “RadioButton”
});
radioButton.appendTo(“#radiobutton”);
radioButton.destroy();
Disable the RadioButton Method: disable

var radioButton = new ej.RadioButton($(“#radiobutton”), {
text: “RadioButton”
});
radiobutton.disable()		 Not applicable
Enable the RadioButton Method: enable

var radioButton = new ej.RadioButton($(“#radiobutton”), {
text: “RadioButton”
});
radiobutton.enable()		 Not applicable

Events

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

var radioButton = new ej.RadioButton($(“#radiobutton”), {
beforeChange: function (args) { /** code block */ }
});		 Not applicable
Change Event Events: change

var radioButton = new ej.RadioButton($(“#radiobutton”), {
change: function (args) { /** code block */ }
});		 Events: change

let radioButton: RadioButton= new RadioButton({
change: (args) => { /** code block */ }
});
radioButton.appendTo(“#radiobutton”);
Create Event Events: create

var radioButton = new ej.RadioButton($(“#radiobutton”), {
create: function (args) { /** code block */ }
});		 Events: created

let radioButton: RadioButton= new RadioButton({
created: () => { /** code block */ }
});
radioButton.appendTo(“#radiobutton”);
Destroy Event Events: destroy

var radioButton = new ej.RadioButton($(“#radiobutton”), {
destroy: function (args) { /** code block */ }
});		 Not applicable