Ej1 api migration in EJ2 TypeScript Check box control

2 May 20236 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

new ej.CheckBox($(“#checkbox”), {
text: “Checkbox”
});		 Property: label

let checkbox: CheckBox = new CheckBox({
label: “Checkbox”
});
checkbox.appendTo(“#checkbox”);
Checked state Property: checked

new ej.CheckBox($(“#checkbox”), {
checked: true
});		 Property: checked

let checkbox: CheckBox = new CheckBox({
checked: true
});
checkbox.appendTo(“#checkbox”);
Indeterminate state Property: enableTriState and checkState

new ej.CheckBox($(“#checkbox”), {
enableTriState: true,
checkState: “indeterminate”
});		 Property: indeterminate

let checkbox: CheckBox = new CheckBox({
indeterminate: true
});
checkbox.appendTo(“#checkbox”);
Adding custom class Property: cssClass

new ej.CheckBox($(“#checkbox”), {
cssClass: “custom-class”
});		 Property: cssClass

let checkbox: CheckBox = new CheckBox({
cssClass: “custom-class”
});
checkbox.appendTo(“#checkbox”);
Disabled state Property: enabled

new ej.CheckBox($(“#checkbox”), {
enabled: false
});		 Property: disabled

let checkbox: CheckBox = new CheckBox({
disabled: true
});
checkbox.appendTo(“#checkbox”);
State persistence Property: enablePersistence

new ej.CheckBox($(“#checkbox”), {
enablePersistence: true
});		 Property: enablePersistence

let checkbox: CheckBox = new CheckBox({
enablePersistence: true
});
checkbox.appendTo(“#checkbox”);
RTL Property: enableRTL

new ej.CheckBox($(“#checkbox”), {
enableRTL: true,
text: “Checkbox”
});		 Property: enableRtl

let checkbox: CheckBox = new CheckBox({
enableRtl: true,
label: “Checkbox” });
checkbox.appendTo(“#checkbox”);
HTML Attributes Property: htmlAttributes

new ej.CheckBox($(“#checkbox”), {
htmlAttributes : { required:”required” },
text: “Checkbox”
});		 Not applicable
Id property Property: id

new ej.CheckBox($(“#checkbox”), {
id: “sync”
});		 Not applicable
Prefix value of Id Property: idPrefix

new ej.CheckBox($(“#checkbox”), {
idPrefix: “ej”
});		 Not applicable
Name attribute Property: name

new ej.CheckBox($(“#checkbox”), {
name: “sports”
});		 Property: name

let checkbox: CheckBox = new CheckBox({
name: “sports”
});
checkbox.appendTo(“#checkbox”);
Value attribute Property: value

new ej.CheckBox($(“#checkbox”), {
value: “football”,
name: “sports”
});		 Property: value

let checkbox: CheckBox = new CheckBox({
value: “football”,
name: “sports”
});
checkbox.appendTo(“#checkbox”);
Show rounded corner Property: showRoundedCorner

new ej.CheckBox($(“#checkbox”), {
showRoundedCorner: true
});		 Not applicable
Size Property: size

new ej.CheckBox($(“#checkbox”), {
size: “small”
});		 Property: cssClass

let checkbox: CheckBox = new CheckBox({
cssClass: “e-small”
});
checkbox.appendTo(“#checkbox”);
Label position Not applicable Property: labelPosition

let checkbox: CheckBox = new CheckBox({
label: “Checkbox”,
labelPosition: “Before”
});
checkbox.appendTo(“#checkbox”);
Validation rules Property: validationRules

new ej.CheckBox($(“#checkbox”), {
validationRules:{ required:true }
});		 Not applicable
Validation message Property: validationMessage

new ej.CheckBox($(“#checkbox”), {
validationRules:{ required:true },
validationMessage: { required: “Required CheckBox value” }
});		 Not applicable

Methods

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

var checkbox = new ej.CheckBox($(“#checkbox”), {
text: “Checkbox”
});
checkbox.destroy();		 Method: destroy

let checkbox: CheckBox = new CheckBox({
label: “Checkbox”
});
checkbox.appendTo(“#checkbox”);
checkbox.destroy();
Disable the Checkbox Method: disable

var checkbox = new ej.CheckBox($(“#checkbox”), {
text: “Checkbox”
});
checkbox.disable();		 Not applicable
Enable the Checkbox Method: enable

var checkbox = new ej.CheckBox($(“#checkbox”), {
text: “Checkbox”
});
checkbox.enable();		 Not applicable
Check state of the Checkbox Method: isChecked

var checkbox = new ej.CheckBox($(“#checkbox”), {
text: “Checkbox”
});
checkbox.isChecked();		 Not applicable

Events

Behavior API in Essential JS 1 API in Essential JS 2
BeforeChange Event Events: beforeChange

var checkbox = new ej.CheckBox($(“#checkbox”), {
beforeChange: function (args) { /** code block */ }
});		 Not applicable
Change Event Events: change

var checkbox = new ej.CheckBox($(“#checkbox”), {
change: function (args) { /** code block */ }
});		 Events: change

let checkbox: CheckBox = new CheckBox({
change: (args) => { /** code block */ }
});
checkbox.appendTo(“#checkbox”);
Create Event Events: create

var checkbox = new ej.CheckBox($(“#checkbox”), {
create: function (args) { /** code block */ }
});		 Events: created

let checkbox: CheckBox = new CheckBox({
created: () => { /** code block */ }
});
checkbox.appendTo(“#checkbox”);
Destroy Event Events: destroy

var checkbox = new ej.CheckBox($(“#checkbox”), {
destroy: function (args) { /** code block */ }
});		 Not applicable