Ej1 api migration in EJ2 JavaScript Radio button control

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

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

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

$(“#radiobutton”).ejRadioButton({
checked: true
});		 Property: checked

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

$(“#radiobutton”).ejRadioButton({
cssClass: “custom-class”
});		 Property: cssClass

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

$(“#radiobutton”).ejRadioButton({
enabled: false
});		 Property: disabled

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

$(“#radiobutton”).ejRadioButton({
enablePersistence: true
});		 Property: enablePersistence

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

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

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

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

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

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

$(“#radiobutton”).ejRadioButton({
name: “sports”
});		 Property: name

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

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

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

$(“#radiobutton”).ejRadioButton({
size: “small”
});		 Property: cssClass

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

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

$(“#radiobutton”).ejRadioButton({
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

$(“#radiobutton”).ejRadioButton({
text: “RadioButton”
});
var radioButton = $(“#radiobutton”).data(“ejRadioButton”);
radioButton.destroy()		 Method: destroy

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

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

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

Events

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

$(“#radiobutton”).ejRadioButton({
beforeChange: function(args) { /** code block */ }
});		 Not applicable
Change Event Events: change

$(“#radiobutton”).ejRadioButton({
change: function(args) { /** code block */ }
});		 Events: change

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

$(“#radiobutton”).ejRadioButton({
create: function(args) { /** code block */ }
});		 Events: created

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

$(“#radiobutton”).ejRadioButton({
destroy: function(args) { /** code block */ }
});		 Not applicable