The Kendo mobile ButtonGroup widget presents a linear set of grouped buttons.

Getting Started

The Kendo mobile Application will automatically initialize a mobile ButtonGroup for every element with role data attribute set to buttongroup present in the views/layouts markup. Alternatively, it can be initialized using jQuery plugin syntax in the containing mobile View init event handler. The ButtonGroup element should be UL element.

<ul id="buttongroup" data-role="buttongroup">
  <li>Option 1</li>
  <li>Option 2</li>
</ul>

var buttongroup = $("#buttongroup").kendoMobileButtonGroup();

Customizing Mobile ButtonGroup Appearance

<ul id="buttongroup" data-role="buttongroup">
  <li style="background-color: green">Option1</li>
  <li style="beckground-color: red">Option2</li>
</ul>

Button Icons

A Button icon can be set in two ways - either by adding an img element inside the Button a element, or by setting an icon data attribute to the Button a element.

KendoUI Mobile ships with several ready to use icons:

• about
• action
• add
• bookmarks
• camera
• cart
• compose
• contacts
• details
• downloads
• fastforward
• favorites
• featured
• toprated
• globe
• history
• home
• info
• more
• mostrecent
• mostviewed
• organize
• pause
• play
• recents
• refresh
• reply
• rewind
• search
• settings
• share
• stop
• trash

Creating Custom Icons

In order to create colorizable icons like the default ones in Kendo UI Mobile, specify the icon image as a box mask (either as dataURI or as a separate image). The image should be PNG8 or PNG24 with alpha channel (PNG8+Alpha is supported by only few graphic editors, so better stick with PNG24). The image color is not important - it will be used as a mask only.

Note: BlackBerry 7.0 has a bug that renders its masks as background-image, so it is recommended to use white in order to support it. The bug is fixed in 7.1.

<style>
.km-custom {
  -webkit-mask-box-image: url("foo.png");
}
</style>

<ul id="buttongroup" data-role="buttongroup">
  <li data-icon="custom">Option 1</li>
  <li>Option 2</li>
</ul>