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

8 posts, 0 answers
  1. Curt
    Curt avatar
    3 posts
    Member since:
    Oct 2012

    Posted 12 Nov 2012 Link to this post

    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

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 13 Nov 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Yevhen
    Yevhen avatar
    3 posts
    Member since:
    Jul 2012

    Posted 22 Nov 2012 Link to this post

    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?
  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 26 Nov 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Yevhen
    Yevhen avatar
    3 posts
    Member since:
    Jul 2012

    Posted 26 Nov 2012 Link to this post

    Sorry for confusion with wrong error details.
    There is another error in IE but works good in Chrome.
    jsFiddle sample
  7. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 29 Nov 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Yevhen
    Yevhen avatar
    3 posts
    Member since:
    Jul 2012

    Posted 29 Nov 2012 Link to this post

    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?

  9. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 04 Dec 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready