Kendo CheckedArray Binder

by redaemn

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<form>
    <input type="radio" id="sesso" name="sesso" data-bind="checkedArray: data.Sesso, source: sessoValues" data-value-field="Value" value="M" /><label for="sesso">Maschio</label>
    <input type="radio" id="sesso" name="sesso" data-bind="checkedArray: data.Sesso, source: sessoValues" data-value-field="Value" value="F" /><label for="sesso">Femmina</label>
    <div data-bind="text: sessoString"></div>
</form>

JavaScript

(function($){
    
    kendo.data.binders.checkedArray = kendo.data.Binder.extend({
        init: function(element, bindings, options) {
            //call the base constructor
            kendo.data.Binder.fn.init.call(this, element, bindings, options);
            
            var that = this;
            //listen for the change event of the element
            $(that.element).on("change", function() {
                that.change(); //call the change function
            });
        },
        refresh: function() {
            // this binder can be applied only to radio input
            if (this.element.type !== "radio") {
                return;
            }
            
            var that = this,
                element = this.element,
                source = that.bindings["source"] ? that.bindings["source"].get() : undefined,
                VMvalue = that.bindings["checkedArray"].get(), //get the value from the View-Model
                elementValue = $(element).val(),
                valueField = that.options.valueField;
 
            if (!valueField) {
                valueField = "Key";
            }
 
            if (VMvalue != null && VMvalue != undefined && VMvalue[valueField] &&
                source != undefined && source.length > 0 && source[0][valueField]) {
 
                // if source array has a length of 0 or the objects inside it
                // don't have the specified property, return
 
                //update the HTML input element
                if (VMvalue[valueField] === elementValue) {
                    element.checked = true;
                }
                else {
                    element.checked = false;
                }
            }
            else {
                element.checked = false;
            }
        },
        change: function() {
            // this binder can be applied only to radio input
            if (this.element.type !== "radio") {
                return;
            }
            
      ...