CheckBox and Data Binding

[Thomas Steschulat]

Hello,

i read about the ejCheckBox and ejRadiobutton implemantation in another post here.

But the example has no Data Binding.

1. Can you explain to me how i can do the Data Binding for your CheckBox Control?

2. And how can i configure the CheckBox Control as a Three State CheckBox?

Looking at the ej.checkbox.js i see that the ejcheckbox has the capability do work as a Three State Checkbox but im new to js and cant work how out how to to this.

Kind Regards

Thomas

[Sasikala Nagarajan]

Hi Thomas,

Thanks for the update,

1. Can you explain to me how i can do the Data Binding for your CheckBox Control?

We can bind the Boolean type fields of data source to checkbox control. Please refer the below link to know about data binding in light switch

myapp.AddEditpassengerItem.Seniorcitizen_render = function (element, contentItem) {

// Write code here.

var itemTemplate = $("<input type='checkbox'id='check' data-role='none'/>");

itemTemplate.appendTo($(element));

itemTemplate.ejCheckBox({

enableTriState:true,

change: function (args) {

contentItem.value = args.isChecked;

}

});

contentItem.dataBind('value', function (value) {

itemTemplate.ejCheckBox({ checked: value });

});
};

Here, “isChecked” argument return the true or false based on the state of checkbox.

We have prepared the sample with checkbox databinding. Please get the sample from below location

Sample location

In this sample we have added Seniorcitizen field as Boolean type field in data source and rendered the checkbox as custom control then bind the data(checked status) as specified in above code snippet in checkbox change event.

2. And how can i configure the CheckBox Control as a Three State CheckBox?
We can enable tri state in checkbox control using enableTriState property. In this state, we can get the checked state of the checkbox using “checkState” property.
Please refer the below code snippet to enable the tri state in check box.

myapp.AddEditpassengerItem.Seniorcitizen_render = function (element, contentItem) {

// Write code here.

var itemTemplate = $("<input type='checkbox'id='check' data-role='none'/>");

itemTemplate.appendTo($(element));

itemTemplate.ejCheckBox({

enableTriState:true,

change: function (args) {

contentItem.value = args.isChecked;

}

});

To know more about available properties please refer the below link

http://helpjs.syncfusion.com/js

To know about API configuration to our JS controls Please refer the below link

http://helpjs.syncfusion.com/js/api-configuration

Also, we have logged an issue in change event’s isChecked argument (isChecked return true for intermediate state also instead of returns the null) in our database. A new support incident (142433) to track the status of this issue has been created under your account. Please follow incident for further queries related to this issue.

Please let us know if you have further queries,

Regards,
Sasikala Nagarajan