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 Boolean|String|Number|Object

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.

Example - Various badge settings

<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.badge.align String (default: '')

Specifies position of the badge relative to button. Valid position options are: top start, top end, bottom start, bottom end.

items.badge.align works in conjunction with items.badge.position.

items.badge.cutoutBorder Boolean (default: false)

Specifies wether or not to render additional "cutout" border around the badge.

items.badge.fill String (default: 'solid')

Specifies the structure of a badge. Valid options are solid (default) and outline.

items.badge.icon String (default: '')

Defines the name for an existing icon in a Kendo UI theme or SVG content. The icon is rendered inside the badge by a span.k-icon or span.k-svg-icon element.

items.badge.max Number (default: Infinity)

If text is a number, it will cap that number.

items.badge.position String (default: 'edge')

Specifies position of the badge relative to the edge of the button. Valid placemnt options are: inline, edge, inside, outside.

Note: position configuration, other than inline requires the badge to be aligned. See items.badge.align for more details.

items.badge.shape String (default: 'rounded')

Specifies the shape of the badge. Valid options are rectangle, rounded, pill, circle, dot.

items.badge.size String (default: 'medium')

Specifies the size of the badge. Valid options are small, medium and large.

items.badge.template String|Function

The template which renders the content of the badge.

items.badge.text String|Number (default: '')

The text of the badge. Valid input includes string, number or object with toString method. Default is empty string.

items.badge.themeColor String (default: 'secondary')

Specifies the color of the component. Valid options are inherit, default, primary, secondary, tertiary, info, success, warning, error, dark, light, inverted.

items.badge.visible Boolean (default: true)

If set to false the badge will not be displayed.

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>