The ButtonGroup widget

Sometimes for navigation between sections inside a view, we may need buttons grouped together. The ButtonGroup widget is helpful in this scenario by transforming an HTML list into a set of buttons. Icons can also be set for each individual buttons just like the Button widget.

Initialization

ButtonGroup can be initialized by setting data-role="buttongroup" to <ul> </ul> as shown in the following code snippet:

<ul data-role="buttongroup" >
  <li> Button 1 </li>
  <li> Button 2 </li>
  <li> Button 3 </li>
</ul>   

ButtonGroup can be initialized using the jQuery plugin syntax too as shown as follows:

<div data-role="view" data-init="initialize">
  <ul id="listButtons" >
    <li> button 1 </li>
    <li> button 2 </li>
    <li> button 3 </li>
  </ul>   
</div>

<script>
  var app = new kendo.mobile.Application(document.body);
  function initialize(){
...