Ej1 api migration in EJ2 JavaScript Check box control

7 May 20256 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

$(“#checkbox”).ejCheckBox({
text: “Checkbox”
});		 Property: label

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

$(“#checkbox”).ejCheckBox({
checked: true
});		 Property: checked

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

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

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

$(“#checkbox”).ejCheckBox({
cssClass: “custom-class”
});		 Property: cssClass

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

$(“#checkbox”).ejCheckBox({
enabled: false
});		 Property: disabled

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

$(“#checkbox”).ejCheckBox({
enablePersistence: true
});		 Property: enablePersistence

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

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

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

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

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

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

$(“#checkbox”).ejCheckBox({
name: “sports”
});		 Property: name

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

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

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

$(“#checkbox”).ejCheckBox({
showRoundedCorner: true
});		 Not applicable
Size Property: size

$(“#checkbox”).ejCheckBox({
size: “small”
});		 Property: cssClass

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

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

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

$(“#checkbox”).ejCheckBox({
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

$(“#checkbox”).ejCheckBox({
text: “Checkbox”
});
var checkbox = $(“#checkbox”).data(“ejCheckBox”);
checkbox.destroy();		 Method: destroy

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

$(“#checkbox”).ejCheckBox({
text: “Checkbox”
});
var checkbox = $(“#checkbox”).data(“ejCheckBox”);
checkbox.disable();		 Not applicable
Enable the Checkbox Method: enable

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

$(“#checkbox”).ejCheckBox({
text: “Checkbox”
});
var checkbox = $(“#checkbox”).data(“ejCheckBox”);
checkbox.isChecked();		 Not applicable

Events

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

$(“#checkbox”).ejCheckBox({
beforeChange: function (args) { /** code block */ }
});		 Not applicable
Change Event Events: change

$(“#checkbox”).ejCheckBox({
change: function change(args) { /** code block */ }
});		 Events: change

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

$(“#checkbox”).ejCheckBox({
create: function(args) { /** code block */ }
});		 Events: created

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

$(“#checkbox”).ejCheckBox({
destroy: function (args) { /** code block */ }
});		 Not applicable