Search results

Migration from Essential JS 1

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

@Html.EJ().CheckBox("checkbox").Text("Checkbox")
Property: label

@Html.EJS().CheckBox("checkbox").Label("Checkbox").Render()
Checked state Property: enableTriState and checkState

@Html.EJ().CheckBox("checkbox").Text("Checked state").EnableTriState(true).CheckState(CheckState.Check)
Property: checked

@Html.EJS().CheckBox("checkbox").Checked(true).Label("Checked state").Render()
Indeterminate state Property: enableTriState and checkState

@Html.EJ().CheckBox("checkbox").Text("Indeterminate state").EnableTriState(true).CheckState(CheckState.Indeterminate)
Property: indeterminate

@Html.EJS().CheckBox("checkbox").Indeterminate(true).Label("Indeterminate state").Render()
Adding custom css class Property: cssClass

@Html.EJ().CheckBox("checkbox").Text("Checkbox").CssClass("custom-class")
Property: cssClass

@Html.EJS().CheckBox("checkbox").CssClass("custom-class").Label("Checkbox").Render()
Label position Not applicable Property: labelPosition

@Html.EJS().CheckBox("checkbox").Label("Checkbox").LabelPosition(Syncfusion.EJ2.Buttons.LabelPosition.Before).Render()
Disabled state Property: enabled

@Html.EJ().CheckBox("checkbox").Text("Checkbox").Enabled(false)
Property: disabled

@Html.EJS().CheckBox("checkbox").Disabled(true).Label("Checkbox").Render()
State persistence Property: enablePersistence

@Html.EJ().CheckBox("checkbox").Text("Checkbox").EnablePersistence(true)
Property: enablePersistence

@Html.EJS().CheckBox("checkbox").EnablePersistence(true).Label("Checkbox").Render()
RTL Property: enableRTL

@Html.EJ().CheckBox("checkbox").Text("Checkbox").EnableRTL(true)
Property: enableRtl

@Html.EJS().CheckBox("checkbox").EnableRtl(true).Label("Checkbox").Render()
HTML Attributes Property: htmlAttributes

@Html.EJ().CheckBox("checkbox").Text("Checkbox").HtmlAttributes("")
Not applicable
Id property Property: id

@Html.EJ().CheckBox("checkbox").Id("sync")
Not applicable
Prefix value of Id Property: idPrefix

@Html.EJ().CheckBox("checkbox").IdPrefix("JS")
Not applicable
Name attribute Property: name

@Html.EJ().CheckBox("checkbox").Name("Conformation"
Property: name

@Html.EJS().CheckBox("checkbox").Name("Conformation").Render()
Value attribute Property: value

@Html.EJ().CheckBox("checkbox").Name("Conformation").Value("received")
Property: value

@Html.EJS().CheckBox("checkbox").Name("Conformation").Value("received").Render()
Show rounded corner Property: showRoundedCorner

@Html.EJ().CheckBox("checkbox")..ShowRoundedCorner(true).Text("Checkbox")
Not applicable
Size Property: size

@Html.EJ().CheckBox("checkbox").Text("Small").Size(Size.Small)
Property: cssClass

@Html.EJS().CheckBox("checkbox").CssClass("e-small").Label("Checkbox").Render()
Validation rules Property: validationRules

@Html.EJ().CheckBox("checkbox").ValidationRules(ViewBag.rules)
Not applicable
Validation message Property: validationMessage

@Html.EJ().CheckBox("checkbox").ValidationRules(ViewBag.rules).ValidationMessage(ViewBag.message)
Not applicable

Methods

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

@Html.EJ().CheckBox("checkbox").Text("Checkbox")
var checkbox = $(“#checkbox”).data(“ejCheckBox”);
checkbox.destroy();
Method: destroy

@Html.EJS().CheckBox("checkbox").Label("Checkbox").Render()
var checkbox = document.getElementById(‘checkbox’).ej2_instances[0];
checkbox.destroy();
Disable the Checkbox Method: disable

@Html.EJ().CheckBox("checkbox").Text("Checkbox")
var checkbox = $(“#checkbox”).data(“ejCheckBox”);
checkbox.disable();
Not applicable
Enable the Checkbox Method: enable

@Html.EJ().CheckBox("checkbox").Text("Checkbox")
var checkbox = $(“#checkbox”).data(“ejCheckBox”);
checkbox.enable();
Not applicable
Check state of the Checkbox Method: isChecked

@Html.EJ().CheckBox("checkbox").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

@Html.EJ().CheckBox("checkbox").Text("Checkbox").BeforeChange("beforeChange")*

function beforeChange(args) {
    /** code block */
}
Not applicable
Change Event Events: change

@Html.EJ().CheckBox("checkbox").Text("Checkbox").Change("change")*

function change(args) {
    /** code block */
}
Events: change

@Html.EJS().CheckBox("checkbox").Label("Checkbox").Change("change").Render()*

function change(args) {
    /** code block */
}
created Event Events: create

@Html.EJ().CheckBox("checkbox").Text("Checkbox").Create("create")*

function create(args) {
    /** code block */
}
Events: created

@Html.EJS().CheckBox("checkbox").Label("Checkbox").Created("created").Render()*

function created() {
    /** code block */
}
Destroy Event Events: destroy

@Html.EJ().CheckBox("checkbox").Text("Checkbox").Destroy("destroy")*

function destroy(args) {
    /** code block */
}
Not applicable