MVVM binding to ButtonGroup index

[RES]

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?

[Alexander Valchev]

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