jube-fork/Jube.App/wwwroot/kendo/examples/mobile-buttongroup/mvvm.html

<div data-model="viewModel" data-role="view" id="buttongroup-mvvm" data-title="ButtonGroup MVVM" data-use-native-scrolling="true">
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>
            Configuration
            <ul>
                <li>Visible <input type="checkbox" data-role="switch" data-bind="checked: isVisible"></li>
                <li>
                    <p>
                        Kendo UI Mobile ButtonGroup supports the
                        <a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a> and
                        <a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.
                    </p>
                </li>
            </ul>
        </li>
        <li>
            ButtonGroup
            <ul>
                <li>
                    <ul data-role="buttongroup"
                        data-index="3"
                        data-bind="visible: isVisible,
                                   events: { select: onSelect }">
                      <li data-icon="rewind"></li>
                      <li data-icon="play"></li>
                      <li data-icon="pause"></li>
                      <li data-icon="stop"></li>
                      <li data-icon="fastforward"></li>
                  </ul>
                </li>
            </ul>
        </li>
    </ul>
    <div class="console"></div>
</div>

<script>
    var viewModel = kendo.observable({
        isEnabled: true,
        isVisible: true,
        onSelect: function(e) {
            var buttonGroup = e.sender;
            var index = buttonGroup.current().index();
            kendoConsole.log("event :: select (" + index + ")", false, "#buttongroup-mvvm");
        }
    });
</script>