MVVM binding to ButtonGroup index

2 posts, 0 answers
  1. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 09 Dec 2013 Link to this post

    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?
  2.
  3. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 11 Dec 2013 Link to this post

    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!
Back to Top