Migration from Essential JS 1

17 Feb 20224 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

@Html.EJ().RadioButton("radio").Text("RadioButton") 		Property: label

@Html.EJS().RadioButton("radio").Label("RadioButton").Render()
Checked state Property: checked

@Html.EJ().RadioButton("radio").Text("RadioButton").Checked(true) 		Property: checked

@Html.EJS().RadioButton("radio").Label("RadioButton").Checked(true).Render()
Adding custom css class Property: cssClass

@Html.EJ().RadioButton("radio").Text("RadioButton").CssClass("custom-class") 		Property: cssClass

@Html.EJS().RadioButton("radio").Label("RadioButton").CssClass("custom-class").Render()
Disabled state Property: enabled

@Html.EJ().RadioButton("radio").Text("RadioButton").Enabled(false) 		Property: disabled

@Html.EJS().RadioButton("radio").Label("RadioButton").Disabled(true).Render()
State persistence Property: enablePersistence

@Html.EJ().RadioButton("radio").Text("RadioButton").EnablePersistence(true) 		Property: enablePersistence

@Html.EJS().RadioButton("radio").Label("RadioButton").EnablePersistence(true).Render()
RTL Property: enableRTL

@Html.EJ().RadioButton("radio").Text("RadioButton").EnableRTL(true) 		Property: enableRtl

@Html.EJS().RadioButton("radio").Label("RadioButton").EnableRtl(true).Render()
HTML Attributes Property: htmlAttributes

@Html.EJ().RadioButton("radio").Text("RadioButton").HtmlAttributes("") 		Not applicable
Id property Property: id

@Html.EJ().RadioButton("radio").Id("sync") 		Not applicable
Prefix value of Id Property: idPrefix

@Html.EJ().RadioButton("radio").IdPrefix("ej") 		Not applicable
Name attribute Property: name

@Html.EJ().RadioButton("radio").Text("Male").Name("gender") 		Property: name

@Html.EJS().RadioButton("radio").Label("Male").Name("gender").Render()
Value attribute Property: value

@Html.EJ().RadioButton("radio").Text("Male").Name("gender").Value("male") 		Property: value

@Html.EJS().RadioButton("radio").Label("Male").Name("gender").Value("male").Render()
Size Property: size

@Html.EJ().RadioButton("radio").Text("Small").Size(RadioButtonSize.Small) 		Property: size

@Html.EJS().RadioButton("radio").Label("Small").CssClass("e-small").Render()
Validation rules Property: validationRules

@Html.EJ().RadioButton("radio").Text("RadioButton").ValidationRules(ViewBag.rules) 		Not applicable
Validation message Property: validationMessage

@Html.EJ().RadioButton("radio").Text("RadioButton").ValidationRules(ViewBag.rules).ValidationMessage(ViewBag.message) 		Not applicable

Methods

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

@Html.EJ().RadioButton("radio").Text("RadioButton")
var radiobutton = $(“#radio”).data(“ejRadioButton”);
radioButton.destroy();		 Method: destroy

@Html.EJS().RadioButton("radio").Label("RadioButton").Render()
var radiobutton = document.getElementById(‘radio’).ej2_instances[0];
radioButton.destroy();
Disable the RadioButton Method: disable

@Html.EJ().RadioButton("radio").Text("RadioButton")
var radiobutton = $(“#radio”).data(“ejRadioButton”);
radioButton.disable();		 Not applicable
Enable the RadioButton Method: enable

@Html.EJ().RadioButton("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

@Html.EJ().RadioButton("radio").Text("RadioButton").BeforeChange("beforeChange")*

function beforeChange(args) {
    /** code block */
}		 Not applicable
Change Event Event: change

@Html.EJ().RadioButton("radio").Text("RadioButton").Change("change")*

function change(args) {
    /** code block */
}		 Event: change

@Html.EJS().RadioButton("radio").Label("RadioButton").Change("change").Render()*

function change(args) {
    /** code block */
}
Create Event Event: create

@Html.EJ().RadioButton("radio").Text("RadioButton").Create("create")*

function create(args) {
    /** code block */
}		 Event: created

@Html.EJS().RadioButton("radio").Label("RadioButton").Created("created").Render()*

function created() {
    /** code block */
}
Destroy Event Event: destroy

@Html.EJ().RadioButton("radio").Text("RadioButton").Destroy("destroy")*

function destroy(args) {
    /** code block */
}		 Not applicable