Getting Started with the RadioGroup
This guide demonstrates how to get up and running with the Kendo UI for jQuery RadioGroup.
After the completion of this guide, you will be able to achieve the following end result:
<ul id="radiogroup"></ul>
<script>
$("#radiogroup").kendoRadioGroup({
value: "two",
items: [{
value: "one",
label: "Label one",
attributes: {
"data-test": "custom"
},
cssClass: "custom-class"
},{
value: "two",
label: "Label two"
},{
value: "three",
label: "Label three",
enabled: false
}]
});
</script>
<style>
.custom-class {
background-color:lightgreen;
}
</style>
1. Create a UL Element
First, create a <ul> element on the page where you want to initialize the RadioGroup component.
<ul id="radiogroup"></ul>
2. Initialize the RadioGroup
In this step, initialize the RadioGroup from the <ul> element. When you initialize the component, all settings of the RadioGroup will be provided in the script statement. You have to describe its configuration and event handlers in JavaScript.
<ul id="radiogroup"></ul>
<script>
// Target the ul element by using jQuery and then call the kendoRadioGroup() method.
$("#radiogroup").kendoRadioGroup();
</script>
After the basic initialization is completed, you can start adding additional configurations to the RadioGroup.
3. Add the Items
The buttons you will see in the RadioGroup are configured through the items option. It exposes various settings such as attributes, cssClass, enabled, and others.
<ul id="radiogroup"></ul>
<script>
// Target the ul element by using jQuery and then call the kendoRadioGroup() method.
$("#radiogroup").kendoRadioGroup({
items: [{
value: "one",
label: "Label one",
attributes: {
"data-test": "custom"
},
cssClass: "custom-class"
},{
value: "two",
label: "Label two"
},{
value: "three",
label: "Label three",
enabled: false
}]
});
</script>
<style>
.custom-class {
background-color:lightgreen;
}
</style>
4. Set the RadioGroup Value
You can preset the value of the component using the value option.
<ul id="radiogroup"></ul>
<script>
$("#radiogroup").kendoRadioGroup({
value: "two",
items: [{
value: "one",
label: "Label one",
attributes: {
"data-test": "custom"
},
cssClass: "custom-class"
},{
value: "two",
label: "Label two"
},{
value: "three",
label: "Label three",
enabled: false
}]
});
</script>
<style>
.custom-class {
background-color:lightgreen;
}
</style>