Getting Started with the SegmentedControl
This guide demonstrates how to get up and running with the Kendo UI for jQuery SegmentedControl.
After the completion of this guide, you will be able to achieve the following end result:
1. Create a Div Element
First, create an empty <div> element on the page from which the SegmentedControl will be initialized.
<div id="segmentedControl"></div>2. Initialize the SegmentedControl
Initialize the SegmentedControl from the <div> element. All configuration options are provided in the script statement.
<div id="segmentedControl"></div>
<script>
// Target the div element by using jQuery and then call the kendoSegmentedControl() method.
$("#segmentedControl").kendoSegmentedControl();
</script>3. Add Items
Use the items option to define the selectable segments. Each item requires a text and a value.
<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
items: [
{ text: "Day", value: "day" },
{ text: "Week", value: "week" },
{ text: "Month", value: "month" }
]
});
</script>4. Add Icons
Use the icon option on each item to display a Kendo UI theme icon alongside the label.
<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
items: [
{ text: "Day", icon: "calendar", value: "day" },
{ text: "Week", icon: "clock", value: "week" },
{ text: "Month", icon: "calendar-date", value: "month" }
]
});
</script>5. Set a Default Selection
Use selectedValue to pre-select one of the items when the component first renders.
<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
items: [
{ text: "Day", icon: "calendar", value: "day" },
{ text: "Week", icon: "clock", value: "week" },
{ text: "Month", icon: "calendar-date", value: "month" }
],
selectedValue: "week"
});
</script>6. Handle the Change Event
Subscribe to the change event to execute custom logic when the user selects a different segment.
<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
items: [
{ text: "Day", icon: "calendar", value: "day" },
{ text: "Week", icon: "clock", value: "week" },
{ text: "Month", icon: "calendar-date", value: "month" }
],
selectedValue: "week",
change: function(e) {
console.log("Selected: " + e.value);
}
});
</script>