Migration from Essential JS 1

17 Feb 20225 minutes to read

This article describes the API migration process of Checkbox component from Essential JS 1 to Essential JS 2.

Properties

Behavior API in Essential JS 1 API in Essential JS 2
Checkbox label Property: text

@Html.EJ().CheckBox("checkbox").Text("Checkbox") 		Property: label

@Html.EJS().CheckBox("checkbox").Label("Checkbox").Render()
Checked state Property: enableTriState and checkState

@Html.EJ().CheckBox("checkbox").Text("Checked state").EnableTriState(true).CheckState(CheckState.Check) 		Property: checked

@Html.EJS().CheckBox("checkbox").Checked(true).Label("Checked state").Render()
Indeterminate state Property: enableTriState and checkState

@Html.EJ().CheckBox("checkbox").Text("Indeterminate state").EnableTriState(true).CheckState(CheckState.Indeterminate) 		Property: indeterminate

@Html.EJS().CheckBox("checkbox").Indeterminate(true).Label("Indeterminate state").Render()
Adding custom css class Property: cssClass

@Html.EJ().CheckBox("checkbox").Text("Checkbox").CssClass("custom-class") 		Property: cssClass

@Html.EJS().CheckBox("checkbox").CssClass("custom-class").Label("Checkbox").Render()
Label position Not applicable Property: labelPosition

@Html.EJS().CheckBox("checkbox").Label("Checkbox").LabelPosition(Syncfusion.EJ2.Buttons.LabelPosition.Before).Render()
Disabled state Property: enabled

@Html.EJ().CheckBox("checkbox").Text("Checkbox").Enabled(false) 		Property: disabled

@Html.EJS().CheckBox("checkbox").Disabled(true).Label("Checkbox").Render()
State persistence Property: enablePersistence

@Html.EJ().CheckBox("checkbox").Text("Checkbox").EnablePersistence(true) 		Property: enablePersistence

@Html.EJS().CheckBox("checkbox").EnablePersistence(true).Label("Checkbox").Render()
RTL Property: enableRTL

@Html.EJ().CheckBox("checkbox").Text("Checkbox").EnableRTL(true) 		Property: enableRtl

@Html.EJS().CheckBox("checkbox").EnableRtl(true).Label("Checkbox").Render()
HTML Attributes Property: htmlAttributes

@Html.EJ().CheckBox("checkbox").Text("Checkbox").HtmlAttributes("") 		Not applicable
Id property Property: id

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

@Html.EJ().CheckBox("checkbox").IdPrefix("JS") 		Not applicable
Name attribute Property: name

@Html.EJ().CheckBox("checkbox").Name("Conformation" 		Property: name

@Html.EJS().CheckBox("checkbox").Name("Conformation").Render()
Value attribute Property: value

@Html.EJ().CheckBox("checkbox").Name("Conformation").Value("received") 		Property: value

@Html.EJS().CheckBox("checkbox").Name("Conformation").Value("received").Render()
Show rounded corner Property: showRoundedCorner

@Html.EJ().CheckBox("checkbox")..ShowRoundedCorner(true).Text("Checkbox") 		Not applicable
Size Property: size

@Html.EJ().CheckBox("checkbox").Text("Small").Size(Size.Small) 		Property: cssClass

@Html.EJS().CheckBox("checkbox").CssClass("e-small").Label("Checkbox").Render()
Validation rules Property: validationRules

@Html.EJ().CheckBox("checkbox").ValidationRules(ViewBag.rules) 		Not applicable
Validation message Property: validationMessage

@Html.EJ().CheckBox("checkbox").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().CheckBox("checkbox").Text("Checkbox")
var checkbox = $(“#checkbox”).data(“ejCheckBox”);
checkbox.destroy();		 Method: destroy

@Html.EJS().CheckBox("checkbox").Label("Checkbox").Render()
var checkbox = document.getElementById(‘checkbox’).ej2_instances[0];
checkbox.destroy();
Disable the Checkbox Method: disable

@Html.EJ().CheckBox("checkbox").Text("Checkbox")
var checkbox = $(“#checkbox”).data(“ejCheckBox”);
checkbox.disable();		 Not applicable
Enable the Checkbox Method: enable

@Html.EJ().CheckBox("checkbox").Text("Checkbox")
var checkbox = $(“#checkbox”).data(“ejCheckBox”);
checkbox.enable();		 Not applicable
Check state of the Checkbox Method: isChecked

@Html.EJ().CheckBox("checkbox").Text("Checkbox")
var checkbox = $(“#checkbox”).data(“ejCheckBox”);
checkbox.isChecked();		 Not applicable

Events

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

@Html.EJ().CheckBox("checkbox").Text("Checkbox").BeforeChange("beforeChange")*

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

@Html.EJ().CheckBox("checkbox").Text("Checkbox").Change("change")*

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

@Html.EJS().CheckBox("checkbox").Label("Checkbox").Change("change").Render()*

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

@Html.EJ().CheckBox("checkbox").Text("Checkbox").Create("create")*

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

@Html.EJS().CheckBox("checkbox").Label("Checkbox").Created("created").Render()*

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

@Html.EJ().CheckBox("checkbox").Text("Checkbox").Destroy("destroy")*

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