This is a migrated thread and some comments may be shown as answers.

MVVM binding to ButtonGroup index

1 Answer 208 Views
ButtonGroup
This is a migrated thread and some comments may be shown as answers.
RES
Top achievements
Rank 1
RES asked on 09 Dec 2013, 11:37 PM
I have a button group like the following:
<ul data-role="buttongroup" data-bind="index: selectedTabIndex, events: { select: tabSelected }">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
</ul>
However I get the following error when Kendo tries to bind my model:
"The index binding is not supported by the ButtonGroup widget"

Is it not possible to bind widget properties to a view model?

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 11 Dec 2013, 01:08 PM
Hello Rei,

It is not possible to bind the index property to a ViewModel field out of the box. This can be done via custom binding.
For example:
<div id="foo" data-role="view" data-model="viewModel">
    <ul data-role="buttongroup" data-bind="index: index, events: { select: tabSelected }">
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
    </ul>
</div>
<script>
    kendo.data.binders.widget.index= 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);
        },
        refresh: function() {
            var that = this,
            value = that.bindings["index"].get(); //get the value from the View-Model
            $(that.element).data("kendoMobileButtonGroup").select(value); //update the widget
        }
    });
 
    var app = new kendo.mobile.Application();
    var viewModel = kendo.observable({
        index: 1,
        tabSelected: function(e) {
            console.log("tab selected");
        }
    });
</script>


As a general information, widget settings are not supposed to be bind to the ViewModel. They are supposed to be set via data attributes.
The difference between binding and setting is that in the first case the widget is supposed to react on change of the ViewModel's value.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ButtonGroup
Asked by
RES
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or