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

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

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

Example - string badge

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

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

items.badge.appearance String (default: pill)

Specifies the shape of the badge - rectangle or pill.

Example

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

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

items.badge.look String (default: flat)

Specifies the look of the badge - flat or outline.

Example

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

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

items.badge.template String|Function

The template which renders the content of the badge

Example - string template

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

<script>
    $("#buttonGroup").kendoButtonGroup({
        items: [
            { text: "foo",  badge: {
                    value: 1234,
                    template: '#=value > 99? "99+" : value#'
                }
            },
            { text: "bar" }
        ]
    });
</script>

Example - function template

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

<script>
    $("#buttonGroup").kendoButtonGroup({
        items: [
            { text: "foo",  badge: {
                    value: 1234,
                    template: function (value){
                        return value > 99 ? '99+' : value;
                    }
                }
            },
            { text: "bar" }
        ]
    });
</script>

items.badge.type String

Specifies the type of the badge - primary, secondary, info, success, warning and error.

Example - string template

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

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

items.badge.value String|Number

The value of the badge

Example - string template

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

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

items.badge.visible Boolean

If set to false the badge will not be displayed.

Example - string template

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

<script>
    $("#buttonGroup").kendoButtonGroup({
        items: [
            { text: "foo",  badge: {
                    visible: false
                }
            },
            { 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? Improve this article