Ej1 api migration in React Check box component

30 Jan 20235 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.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

Methods

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

Events

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