This article describes the API migration process of Checkbox component from Essential JS 1 to Essential JS 2.
| 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 |
| 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 |
| 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 |