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

<ej-check-box id="checkbox" text="Checkbox" > 		Property: label

<ejs-checkbox id="checkbox" label="Checkbox"></ejs-checkbox>
Checked state Property: enableTriState and checkState

<ej-check-box id="checkbox" enable-tri-state="true" text="Checked state" check-state="@CheckState.Check"/> 		Property: checked

<ejs-checkbox id="checkbox" checked="true" label="Checked state"></ejs-checkbox>
Indeterminate state Property: enableTriState and checkState

<ej-check-box id="checkbox" text="Indeterminate state" enable-tri-state="true" check-state="@CheckState.Indeterminate" /> 		Property: indeterminate

<ejs-checkbox id="indeterminate" indeterminate="true" label="Intermediate state"></ejs-checkbox>
Adding custom css class Property: cssClass

<ej-check-box id="checkbox" text="Checkbox" css-class="custom-class"/> 		Property: cssClass

<ejs-checkbox id="checkbox" cssClass="custom-class" label="Checkbox"></ejs-checkbox>
Label position Not applicable Property: labelPosition

<ejs-checkbox id="checkbox" label="Checkbox" labelPosition="Before"></ejs-checkbox>
Disabled state Property: enabled

<ej-check-box id="checkbox" text="Checkbox" enabled="false"/> 		Property: disabled

<ejs-checkbox id="checkbox" label="Checkbox" disabled="true"></ejs-checkbox>
State persistence Property: enablePersistence

<ej-check-box id="checkbox" text="Checkbox" enable-persistence="true"/> 		Property: enablePersistence

<ejs-checkbox id="checkbox" label="Checkbox" enablePersistence="true"></ejs-checkbox>
RTL Property: enableRTL

<ej-check-box id="checkbox" text="Checkbox" enable-rtl="true"/> 		Property: enableRtl

<ejs-checkbox id="checkbox" label="Checkbox" enableRtl="true"></ejs-checkbox>
HTML Attributes Property: htmlAttributes

<ej-check-box id="checkbox" text="Checkbox" html-attributes=""/> 		Not applicable
Id property Property: id

<ej-check-box id="checkbox" text="sync" /> 		Not applicable
Prefix value of Id Property: idPrefix

<ej-check-box id="checkbox" text="Checkbox" id-prefix="aspnetcore"/> 		Not applicable
Name attribute Property: name

<ej-check-box id="checkbox" name="conformation" /> 		Property: name

<ejs-checkbox id="checkbox" name="conformation"></ejs-checkbox>
Value attribute Property: value

<ej-check-box id="checkbox" name="conformation" value="Received"/> 		Property: value

<ejs-checkbox id="checkbox" name="conformation" value="Received"></ejs-checkbox>
Show rounded corner Property: showRoundedCorner

<ej-check-box id="checkbox" text="Checkbox" show-rounded-corner="true"/> 		Not applicable
Size Property: size

<ej-check-box id="checkbox" text="Small" size="@Size.Small" /> 		Property: cssClass

<ejs-checkbox id="checkbox" cssClass="e-small" label="Checkbox"></ejs-checkbox>
Validation rules Property: validationRules

<ej-check-box id="checkbox" validation-rules="ViewBag.rules" /> 		Not applicable
Validation message Property: validationMessage

<ej-check-box id="checkbox" validation-rules="ViewBag.rules" validation-message="ViewBag.message" /> 		Not applicable

Methods

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

<ej-check-box id="checkbox" text="Checkbox" />
var checkbox = $(“#checkbox”).data(“ejCheckBox”);
checkbox.destroy();		 Method: destroy

<ejs-checkbox id="checkbox" label="Checkbox"></ejs-checkbox>
var checkbox = document.getElementById(‘checkbox’).ej2_instances[0];
checkbox.destroy();
Disable the Checkbox Method: disable

<ej-check-box id="checkbox" text="Checkbox" />
var checkbox = $(“#checkbox”).data(“ejCheckBox”);
checkbox.disable();		 Not applicable
Enable the Checkbox Method: enable

<ej-check-box id="checkbox" text="Checkbox" />
var checkbox = $(“#checkbox”).data(“ejCheckBox”);
checkbox.enable();		 Not applicable
Check state of the Checkbox Method: isChecked

<ej-check-box id="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

ej-check-box id="checkbox" text="Checkbox" before-change="beforeChange" />
function beforeChange(args) {
    /** code block */
}		 Not applicable
Change Event Events: change

<ej-check-box id="checkbox" text="Checkbox" change="change" />
function change(args) {
    /** code block */
}		 Events: change

<ejs-checkbox id="checkbox" label="Checkbox" change="change"></ejs-checkbox>
function change(args) {
    /** code block */
}
created Event Events: create

<ej-check-box id="checkbox" text="Checkbox" create="create" />
function create(args) {
    /** code block */
}		 Events: created

<ejs-checkbox id="checkbox" label="Checkbox" created="created"></ejs-checkbox>
function created() {
    /** code block */
}
Destroy Event Events: destroy

<ej-check-box id="checkbox" text="Checkbox" destroy="destroy" />
function destroy(args) {
    /** code block */
}		 Not applicable