databinding checkbox to numeric value

[David]

Hello,

 

I have been unable to locate an example of how I would go about using kendo's data binding to bind a checkbox with a numeric column on my model, where 0 = unchecked, and 1 = checked.

 

Thanks

[Stefan]

Hello David,

The desired result can be achieved using the Kendo UI template and an if statement inside the template. I can suggest inside the template to check if the value of the item in the column is 1 and based on that information to render the checkbox either checked or unchecked:

http://docs.telerik.com/kendo-ui/framework/templates/overview#create-external-templates

http://dojo.telerik.com/OdUXo

If the column is in a Kendo UI Grid, I can suggest the following. On the dataBound event of the Grid to go through the items in the dataSource and adding the appropriate attribute or property to the checkboxes. The data can be retrieved using the view method of the Grid. I can suggest using the columns.template property of the Grid to add the checkbox column: 

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-view

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.template

http://dojo.telerik.com/UYevi

Let me know if you need additional information on this matter.
 
Regards,
Stefan
Telerik by Progress

[David]

Hi Stefan,

Thanks for your response.  I am interested in two way databinding with the model.  If I understand your examples, they seem to only show how to display them.

When I use <input type='checkbox' name='TOGGLE' data-bind='checked: TOGGLE' data-type='number' value='0' /> it seems to still want to save the value as a boolean.

Dave

[Stefan]

Hello David,

Thank you for the clarification that the requirement is to use two-way binding.

In the described scenario the binding will work only the first time as the checkbox will convert 0 and 1 respectively to true and false, but the checkbox will only return true and false which cannot be automatically converted to 0 or 1 by the NumericTextBox.

In this scenario, I can suggest using a custom two-way binding to manually handle converting the true and false values to 0 and 1. Please check the article in our documentation demonstrating how to achieve custom two-way binding:

http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/custom#two-way-custom-bindings

I hope this will help to achieve the desired result.

Regards,
Stefan
Telerik by Progress