itemsArray
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.attributesObject
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.badgeBoolean|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.alignString(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.
Example
<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
items: [
{
text: "Save",
badge: {
text: "NEW",
position: "edge",
align: "top end"
}
},
{
text: "Delete",
badge: {
text: "5",
position: "edge",
align: "bottom start"
}
}
]
});
</script>items.badge.cutoutBorderBoolean(default: false)
Specifies wether or not to render additional "cutout" border around the badge.
Example
<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
items: [
{
text: "Save",
badge: {
text: "1",
cutoutBorder: true
}
},
{
text: "Delete",
badge: {
text: "2",
cutoutBorder: false
}
}
]
});
</script>items.badge.fillString(default: undefined)
Sets a value controlling how the color is applied to the badge. When undefined (the default), the theme controls the fill mode. Can also be set to the following string values:
- "solid"
- "outline"
Example
<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
items: [
{
text: "Solid Badge",
badge: {
text: "5",
fill: "solid"
}
},
{
text: "Outline Badge",
badge: {
text: "10",
fill: "outline"
}
}
]
});
</script>items.badge.iconString(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.
Example
<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
items: [
{
text: "Alert",
badge: {
icon: "warning"
}
},
{
text: "Success",
badge: {
icon: "check"
}
}
]
});
</script>items.badge.maxNumber(default: Infinity)
If text is a number, it will cap that number.
Example
<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
items: [
{
text: "Messages",
badge: {
text: 150,
max: 99
}
},
{
text: "Notifications",
badge: {
text: 25,
max: 50
}
}
]
});
</script>items.badge.positionString(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.
Example
<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
items: [
{
text: "Inline",
badge: {
text: "NEW",
position: "inline"
}
},
{
text: "Edge",
badge: {
text: "5",
position: "edge",
align: "top end"
}
},
{
text: "Inside",
badge: {
text: "!",
position: "inside",
align: "top start"
}
}
]
});
</script>items.badge.shapeString(default: 'rounded')
Specifies the shape of the badge.
Valid options are rectangle, rounded, pill, circle, dot.
Example
<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
items: [
{
text: "Rectangle",
badge: {
text: "1",
shape: "rectangle"
}
},
{
text: "Rounded",
badge: {
text: "2",
shape: "rounded"
}
},
{
text: "Circle",
badge: {
text: "3",
shape: "circle"
}
},
{
text: "Dot",
badge: {
shape: "dot"
}
}
]
});
</script>items.badge.sizeString(default: undefined)
Sets a value controlling the size of the badge. When undefined (the default), the theme controls the size. Can also be set to the following string values:
- "small"
- "medium"
- "large"
Example
<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
items: [
{
text: "Small",
badge: {
text: "S",
size: "small"
}
},
{
text: "Medium",
badge: {
text: "M",
size: "medium"
}
},
{
text: "Large",
badge: {
text: "L",
size: "large"
}
}
]
});
</script>items.badge.templateString|Function
The template which renders the content of the badge.
Example
<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
items: [
{
text: "Custom Template",
badge: {
template: (data) => `<strong>${data.value}</strong>`,
text: "NEW"
}
},
{
text: "Function Template",
badge: {
template: function(data) {
return `<i class="k-icon k-i-star"></i> ${data.value}`;
},
text: "5"
}
}
]
});
</script>items.badge.textString|Number(default: '')
The text of the badge. Valid input includes string, number or object with toString method. Default is empty string.
Example
<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
items: [
{
text: "String Text",
badge: {
text: "NEW"
}
},
{
text: "Number Text",
badge: {
text: 42
}
},
{
text: "Object Text",
badge: {
text: { toString: function() { return "OBJ"; } }
}
}
]
});
</script>items.badge.themeColorString(default: undefined)
Specifies the color of the component. If undefined (the default), the theme controls the default color.
Valid options are inherit, default, primary, secondary, tertiary, info, success, warning, error, dark, light, inverted.
Example
<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
items: [
{
text: "Primary",
badge: {
text: "1",
themeColor: "primary"
}
},
{
text: "Success",
badge: {
text: "2",
themeColor: "success"
}
},
{
text: "Warning",
badge: {
text: "3",
themeColor: "warning"
}
},
{
text: "Error",
badge: {
text: "4",
themeColor: "error"
}
}
]
});
</script>items.badge.visibleBoolean(default: true)
If set to false the badge will not be displayed.
Example
<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
items: [
{
text: "Visible Badge",
badge: {
text: "SHOW",
visible: true
}
},
{
text: "Hidden Badge",
badge: {
text: "HIDE",
visible: false
}
}
]
});
</script>items.enabledBoolean(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.iconString
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.iconClassString
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.imageUrlString
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.selectedBoolean(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.textString
Specifies the text of the ButtonGroup item.
Example
<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
items: [
{ text: "foo" },
{ text: "bar" }
]
});
</script>items.encodedBoolean(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>