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 |