How to bind combobox to both 'value' and 'text' properties

[Curt]

Combobox supports viewmodel binding to the "value" property as follows:

<input id="gradeCombo" data-role="combobox" data-bind="value: source.gradeValue"/>

Is there anyway to also bind to the "text" property, such as:

<input id="gradeCombo" data-role="combobox" data-bind="value: source.gradeValue, text: source.gradeText"/>

Trying to bind to the "text" property above fails.  So is there some other way to do this?  And where is the complete list of supported binding properties documented? 

Binding to the text is especially needed when using a remote datasource for the list of selections because:
1) you don't want to query the remote datasource (to find the text) unless the user interacts with the control
2) remote datasource is designed to query based on what user types in (i.e. text property) not the underlying value

[Georgi Krustev]

Hello Curt,

 
Here is a quote of the support ticket opened on the same subject:

Currently, the text binding of the ComboBox widget is not supported. For a complete list of the suppoted bindings check the help topics in the "Bindings" folder.

In order to achieve your goal, we will need to implement custom widget binding, which will use the text method of the widget. Here is the custom binding:

kendo.data.binders.widget.comboboxText = 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.comboboxText.set(this.widget.text());
},
refresh: function() {
this.widget.text(this.bindings.comboboxText.get());
},
destroy: function() {
this.widget.unbind("change", this._change);
}
});

For more information about different methods check this help topic.

The modified html page is attached to this message.

Kind regards,
Georgi Krustev
the Telerik team

[Yevhen]

I'm getting following error  on IE9:
'Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; MS-RTC LM 8; .NET4.0C; .NET4.0E; BRI/2)
Timestamp: Thu, 22 Nov 2012 13:30:12 UTC

Message: The comboboxText binding is not supported by the ComboBox widget
Line: 8
Char: 85668
Code: 0
URI: http://localhost:52311/Scripts/kendo.all.min.js'

But on Chrome/FireFox it works fine. Do you have any thoughts regarding this.
Is custom binding for widgets supported in JavaScript engine of IE9?

[Georgi Krustev]

Hello,

 
Probably, the bindings are not registered when the ComboBox widget is initializing. Check this jsFiddle demo, which shows how to implement custom bindings for the ComboBox.

Kind regards,
Georgi Krustev
the Telerik team

[Yevhen]

Sorry for confusion with wrong error details.
There is another error in IE but works good in Chrome.
jsFiddle sample

[Georgi Krustev]

Hello,

 
If we leave only the grid in the jsFiddle demo an alert will pop out. It clearly says that the selectable binding is not supported. Check the updated jsFiddle demo. Please remvoe it and everything will work as expected.

Regards,
Georgi Krustev
the Telerik team

[Yevhen]

Hi,

First of all, I want to say thank you for your time.

In two words about my case:
I do know that selectable property does not support binding, so the idea was - to extend this behavior through Custom Binding.
Selectable property was chosen as it's rather simple to see the result of binding.
To enable binding for selectable property I created following binding:

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: this.bindings.selectable.get() });
},
destroy: function () {
this.widget.unbind("change", this._change);
}
});

Is this correct way of using such feature as Custom Binding?

[Georgi Krustev]

Hello Yevhen,

 
Thank you for the clarification. If I undertand correctly, the goal of the selectable binding will be a persistance of the selected row in a property of the ViewModel. Also when the this property changes the grid should re-select correct item. If this the case, then you will need to bind the change event of the widget and save the selected cell or row. When the refresh method of the binding is called then you will need to use the select method of the grid to select correct cells/rows. You should not re-initialize grid as this is not supported.

Regards,
Georgi Krustev
the Telerik team