New to Kendo UI for jQuery? Start a free 30-day trial

Items

configuration

A JavaScript array that contains the ButtonGroup's items configuration.

items

Array

<div id="buttonGroup"></div>
<script>
    $("#buttonGroup").kendoButtonGroup({
        items: [
            { text: "Align Left", icon: "align-left", selected: true},
            { text: "Align Center", icon: "align-center"},
            { text: "Align Right", icon: "align-right"},
        ]
    });
</script>

items.attributes

Object

Specifies the HTML attributes of a ButtonGroup item.

HTML attributes which are JavaScript keywords (e.g. class) must be quoted.

<div id="buttonGroup"></div>

<script>
    $("#buttonGroup").kendoButtonGroup({
        items: [
            { text: "Align Left", icon: "align-left"},
            { text: "Align Center", icon: "align-center", attributes: {class: "red"}},
            { text: "Align Right", icon: "align-right"},
        ]
    });
</script>

<style>
    .red { background-color: red; }
</style>

If set to true a default overlay badge will be displayed. If set to a string, an ovelay with content set to the specified string will be displayed. Can be set to a JavaScript object which represents the configuration of the Badge widget.

<div style="padding: 10px; background: #cccccc;">
    <div id="buttonGroup"></div>
</div>

<script>
    $("#buttonGroup").kendoButtonGroup({
        items: [
            {
                text: "foo",
                badge: {
                    text: 1234,
                    max: 99,
                    themeColor: "warning",
                    position: "inline"
                }
            },
            {
                text: "bar",
                badge: {
                    icon: "plus",
                    themeColor: "success",
                    cutoutBorder: true
                }
            }
        ]
    });
</script>

items.enabled

Boolean

Specifies if a button is enabled.

Default: true

<div id="buttonGroup"></div>

<script>
    $("#buttonGroup").kendoButtonGroup({
        items: [
            { text: "foo",  enabled: false },
            { text: "bar" }
        ]
    });
</script>

items.encoded

Boolean

Specifies if text field of the ButtonGroup item should be encoded.

Default: true

<div id="buttonGroup"></div>

<script>
    $("#buttonGroup").kendoButtonGroup({
        items: [
            { text: "<b>foo</b>", encoded: false },
            { text: "<b>bar</b>", encoded: true }
        ]
    });
</script>

items.icon

String

Defines the name of an existing icon in a Kendo theme.

<div id="buttonGroup"></div>

<script>
    $("#buttonGroup").kendoButtonGroup({
        items: [
            { icon: "align-left" },
            { icon: "align-center" },
            { icon: "align-right" }
        ]
    });
</script>

items.iconClass

String

Allows the usage of custom icons. Defines CSS classes which are to be applied to a span element inside the ButtonGroup item.

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<div id="buttonGroup"></div>

<script>
    $("#buttonGroup").kendoButtonGroup({
        items: [
            { iconClass: "fa fa-male" },
            { icon: "align-center" },
            { icon: "align-right" }
        ]
    });
</script>

items.imageUrl

String

If set, the ButtonGroup will render an image with the specified URL in the button.

<div id="buttonGroup"></div>

<script>
    var baseUrl = "https://demos.telerik.com/kendo-ui/content/shared/icons";
    $("#buttonGroup").kendoButtonGroup({
        items: [
            { text: "foo", imageUrl: baseUrl + "/sports/snowboarding.png" },
            { text: "bar", imageUrl: baseUrl + "/sports/snowboarding.png" }
        ]
    });
</script>

items.selected

Boolean

Specifies if a button is initially selected.

Default: false

<div id="buttonGroup"></div>

<script>
    $("#buttonGroup").kendoButtonGroup({
        items: [
            { text: "foo",  selected: true },
            { text: "bar" }
        ]
    });
</script>

items.text

String

Specifies the text of the ButtonGroup item.

<div id="buttonGroup"></div>

<script>
    $("#buttonGroup").kendoButtonGroup({
        items: [
            { text: "foo" },
            { text: "bar" }
        ]
    });
</script>

Related Members