New to Kendo UI for jQuery? Start a free 30-day trial

Change

events

Fires when the user changes a button selection in the SegmentedControl.

The event handler function context (available via the this keyword) will be set to the widget instance.

change

Event Data

e.item `Object`

The item data object of the selected button.

e.value `String`

The value of the selected button.

e.preventDefault `Function`

If invoked, prevents the selection change.

e.sender `kendo.ui.SegmentedControl`

The widget instance which fired the event.

<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
  items: [
    { text: "Option 1", value: "option1" },
    { text: "Option 2", value: "option2" },
    { text: "Option 3", value: "option3" }
  ],
  change: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(e.value);
  }
});
</script>

<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
  items: [
    { text: "Option 1", value: "option1" },
    { text: "Option 2", value: "option2" },
    { text: "Option 3", value: "option3" }
  ]
});
var segmentedControl = $("#segmentedControl").data("kendoSegmentedControl");
segmentedControl.bind("change", function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(e.item);
});
</script>

Change

change

Event Data

e.item Object

e.value String

e.preventDefault Function

e.sender kendo.ui.SegmentedControl

e.item `Object`

e.value `String`

e.preventDefault `Function`

e.sender `kendo.ui.SegmentedControl`