Getting Started with the ButtonGroup
This guide demonstrates how to get up and running with the Kendo UI for jQuery ButtonGroup.
After the completion of this guide, you will be able to achieve the following end result:
<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
size:"large",
rounded:'full',
themeColor:"success",
fillMode: "outline",
items: [
{ text: "<b>First Button</b>", encoded: false },
{ text: "<b>Second Button</b>", encoded: true }
]
});
</script>
1. Create an Empty Div Element
First, create an empty <div> element on the page from which the ButtonGroup component will be initialized.
<div id="buttonGroup"></div>
2. Initialize the ButtonGroup
In this step, you will initialize the ButtonGroup from the <div> element. When you initialize the component, all settings of the ButtonGroup will be provided in the script statement. You have to describe its configuration and event handlers in JavaScript.
<div id="buttonGroup"></div>
<script>
// Target the div element by using jQuery and then call the kendoButtonGroup() method.
$("#buttonGroup").kendoButtonGroup();
</script>
Once the basic initialization is completed, you can start adding additional configurations to the ButtonGroup.
3. Change the Appearance of the ButtonGroup
The ButtonGroup provides various configurations to change its appearance. Below you can see how to use the fillMode, rounded, themeColor, and size options.
<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
size:"large",
rounded:'full',
themeColor:"success",
fillMode: "outline",
items: [
{ text: "<b>First Button</b>", encoded: false },
{ text: "<b>Second Button</b>", encoded: true }
]
});
</script>