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,
                    color: "warning",
                    position: "inline"
                }
            },
            {
                text: "bar",
                badge: {
                    icon: "add",
                    color: "success",
                    cutoutBorder: true
                }
            }
        ]
    });
</script>

items.badge.appearance String (default: pill)

Deprecated! Use items.badge.shape instead.

For compatibility items.badge.appearance maps to items.badge.shape.

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

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

items.badge.color 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.cutoutBorder Boolean (default: false)

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

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.look String (default: solid)

Deprecated! Use items.badge.badgeStyle instead.

For compatibility badge.look maps to badge.badgeStyle.

items.badge.max Number (default: Infinity)

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

items.badge.overlay Boolean (default: true)

Deprecated! Use items.badge.position instead.

There is no built in mapping between items.badge.overlay and items.badge.position:

  • items.badge.overlay: false can be achieved by setting items.badge.position: "inline"
  • items.badge.overlay: true can be achieved by setting items.badge.position: "top end", or not setting it at all.

For compatibility items.badge.overlay is kept, even though it has no effect on the badge.

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

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

Note: placement configuration requires the badge to be positioned. See items.badge.position for more details.

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

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

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

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.type String (default: 'secondary')

Deprecated! Use items.badge.color instead.

For compatibility items.badge.type maps to items.badge.color.

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

Deprecated! Use items.badge.text instead.

For compatibility items.badge.value maps to items.badge.text.

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>
In this article
Not finding the help you need? Improve this article