Ej1 api migration in EJ2 JavaScript 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 $(“#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 |