ComboBox - autobind:false and MVM
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<div id="storeInfo">
<input id="gradeCombo" data-role="combobox" data-bind="source: source.list, comboboxValue: source.gradeValue, comboboxText: source.gradeText" />
<div id="tgrid" data-role="grid" data-bind="source: source.list, selectable: source.gradeText"
data-columns='["label", "id"]' ></div>
</div>
JavaScript
$(function(){
var kendoViewModel = kendo.observable({
source: {
gradeValue: "A",
gradeText: "Single, Cell",
list: [
{ "label": "Single, Cell", "id": "A" },
{ "label": "Single, Row", "id": "B1" },
{ "label": "Multiple, Row", "id": "B2" }
]
}
});
$('#gradeCombo').kendoComboBox({
dataTextField: 'label',
dataValueField: 'id',
autoBind: false
});
//custom binding for value
kendo.data.binders.widget.comboboxValue = kendo.data.Binder.extend({
init: function(widget, bindings, options) {
//call the base constructor
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
this.widget = widget;
this._change = $.proxy(this.change, this);
this.widget.bind("change", this._change);
},
change: function() {
this.bindings.comboboxValue.set(this.widget.value());
},
refresh: function() {
var widget = this.widget,
value = this.bindings.comboboxValue.get();
if (widget.dataSource.view()[0]) {
widget.value(value);
} else {
widget.element.val(value);
}
},
destroy: function() {
this.widget.unbind("change", this._change);
}
});
kendo.data.binders.widget.selectable = kendo.data.Binder.extend({
init: function (widget, bindings, options) {
//call the base constructor
kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
this.widget = widget;
this._change = $.proxy(this.change, this);
this.widget.bind("change", this._change);
},
change: function () {
this.bindings.selectable.set(this.widget.selectable);
},
refresh: function () {
$(this.element).kendoGrid({ selectable:...