items Array

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

Example - initialize ButtonGroup with items

<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.

Example - adding custom class to a button

<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>

items.badge String

Specifies the badge of a button.

Example

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

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

items.enabled Boolean (default: true)

Specifies if a button is enabled.

Example

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

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

items.icon String

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

Example

<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.

Example

<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.

Example

<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 (default: false)

Specifies if a button is initially selected.

Example

<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.

Example

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

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

items.encoded Boolean (default: true)

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

Example

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

<script>
    $("#buttonGroup").kendoButtonGroup({
        items: [
            { text: "<b>foo</b>", encoded: false },
            { text: "<b>bar</b>", encoded: true }
        ]
    });
</script>
In this article
Not finding the help you need?