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.CheckBox id="checkbox" text="Checkbox"></EJ.CheckBox> |
Property: label <CheckBoxComponent id="checkbox" label="Checkbox"></CheckBoxComponent> |
| Checked state | Property: enableTriState and checkState <EJ.CheckBox id="checkbox" enableTriState={true} text="Checked state" checkState="check"></EJ.CheckBox> |
Property: checked <CheckBoxComponent id="checkbox" checked={true} label="Checked state"></CheckBoxComponent> |
| Indeterminate state | Property: enableTriState and checkState <EJ.CheckBox id="checkbox" text="Indeterminate state" enableTriState={true} checkState="indeterminate"></EJ.CheckBox> |
Property: indeterminate <CheckBoxComponent id="indeterminate" indeterminate={true} label="Intermediate state"></CheckBoxComponent> |
| Adding custom css class | Property: cssClass <EJ.CheckBox id="checkbox" text="Checkbox" cssClass="custom-class"></EJ.CheckBox> |
Property: cssClass <CheckBoxComponent id="checkbox" cssClass="custom-class" label="Checkbox"></CheckBoxComponent> |
| Label position | Not applicable | Property: labelPosition <CheckBoxComponent id="checkbox" label="Checkbox" labelPosition="Before"></CheckBoxComponent> |
| Disabled state | Property: enabled <EJ.CheckBox id="checkbox" text="Checkbox" enabled={false}></EJ.CheckBox> |
Property: disabled <CheckBoxComponent id="checkbox" label="Checkbox" disabled={true}></CheckBoxComponent> |
| State persistence | Property: enablePersistence <EJ.CheckBox id="checkbox" text="Checkbox" enablePersistence={true}></EJ.CheckBox> |
Property: enablePersistence <CheckBoxComponent id="checkbox" label="Checkbox" enablePersistence={true}></CheckBoxComponent> |
| RTL | Property: enableRTL <EJ.CheckBox id="checkbox" text="Checkbox" enableRTL={true}></EJ.CheckBox> |
Property: enableRtl <CheckBoxComponent id="checkbox" label="Checkbox" enableRtl={true}></CheckBoxComponent> |
| HTML Attributes | Property: htmlAttributes var attributes = { required:“required” }; <EJ.CheckBox id="checkbox" text="Checkbox" htmlAttributes={attributes}></EJ.CheckBox> |
Not applicable |
| Id property | Property: id <EJ.CheckBox id="sync"></EJ.CheckBox> |
Not applicable |
| Prefix value of Id | Property: idPrefix <EJ.CheckBox id="checkbox" text="Checkbox" id-prefix="react"></EJ.CheckBox> |
Not applicable |
| Name attribute | Property: name <EJ.CheckBox id="checkbox" name="conformation"></EJ.CheckBox> |
Property: name <CheckBoxComponent id="checkbox" name="conformation"></CheckBoxComponent> |
| Value attribute | Property: value <EJ.CheckBox id="checkbox" name="conformation" value="Received"></EJ.CheckBox> |
Property: value <CheckBoxComponent id="checkbox" name="conformation" value="Received"></CheckBoxComponent> |
| Show rounded corner | Property: showRoundedCorner <EJ.CheckBox id="checkbox" text="Checkbox" showRoundedCorner={true}></EJ.CheckBox> |
Not applicable |
| Size | Property: size <EJ.CheckBox id="checkbox" text="Small" size="small"></EJ.CheckBox> |
Property: cssClass <CheckBoxComponent id="checkbox" cssClass="e-small" label="Checkbox"></CheckBoxComponent> |
| Validation rules | Property: validationRules var rules = { required: true }; <EJ.CheckBox id="checkbox" validationRules={rules}></EJ.CheckBox> |
Not applicable |
| Validation message | Property: validationMessage var rules = { required: true }; var message = { required: “Required CheckBox value” }; <EJ.CheckBox id="checkbox" validationRules={rules} validationMessage={message}></EJ.CheckBox> |
Not applicable |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Destroy | Method: destroy <EJ.CheckBox id="checkbox" text="Checkbox"></EJ.CheckBox> var checkbox = $(‘#checkbox’).ejCheckBox(‘instance’); checkbox.destroy(); |
Method: destroy <CheckBoxComponent id="checkbox" label="Checkbox" ref={(scope) => {this.checkbox = scope}></CheckBoxComponent> constructor(props: {}) { this.checkbox.destroy(); } |
| Disable the Checkbox | Method: disable <EJ.CheckBox id="checkbox" text="Checkbox"></EJ.CheckBox> var checkbox = $(‘#checkbox’).ejCheckBox(‘instance’); checkbox.disable(); |
Not applicable |
| Enable the Checkbox | Method: enable <EJ.CheckBox id="checkbox" text="Checkbox"></EJ.CheckBox> var checkbox = $(‘#checkbox’).ejCheckBox(‘instance’); checkbox.enable(); |
Not applicable |
| Check state of the Checkbox | Method: isChecked <EJ.CheckBox id="checkbox" text="Checkbox"></EJ.CheckBox> var checkbox = $(‘#checkbox’).ejCheckBox(‘instance’); checkbox.isChecked(); |
Not applicable |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| BeforeChange Event | Events: beforeChange EJ.CheckBox id="checkbox" text="Checkbox" beforeChange={beforeChange}></EJ.CheckBox>function beforeChange(args) { /** code block */ } |
Not applicable |
| Change Event | Events: change <EJ.CheckBox id="checkbox" text="Checkbox" change={change}></EJ.CheckBox>function change(args) { /** code block */ } |
Events: change <CheckBoxComponent id="checkbox" label="Checkbox" change={this.change.bind(this)}></CheckBoxComponent>change(args) { /** code block */ } |
| created Event | Events: create <EJ.CheckBox id="checkbox" text="Checkbox" create={create}></EJ.CheckBox>function create(args) { /** code block */ } |
Events: created <CheckBoxComponent id="checkbox" label="Checkbox" created={this.created.bind(this)}></CheckBoxComponent>created() { /** code block */ } |
| Destroy Event | Events: destroy <EJ.CheckBox id="checkbox" text="Checkbox" destroy={destroy}></EJ.CheckBox>function destroy(args) { /** code block */ } |
Not applicable |