Kendo UI Radio Button Group Widget
HTML
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
<div id="radioButtonGroup"></div>
<div id="results">
<button class="k-button">Selected</button>
<div id="events">
<b>Events</b>
<div id="console">
</div>
</div>
</div>
<div style="margin-top:20px;">
<span>Learn about this fiddle at:</span>
<a href="http://jsdev.wikidot.com/blog:5" target="_top">Creating a Kendo UI Radio Button Group Widget</a>
</div>
CSS
#results, #events {
margin-top: 20px;
}
#console > div {
margin-bottom: 10px;
}
JavaScript
/* Radio Button Group Widget */
/// <summary>Kendo UI Radio Button Group Widget.</summary>
/// <description>Kendo UI widget that displays a radio button group.</description>
/// <version>1.0</version>
/// <author>John DeVight</author>
/// <license>
/// Licensed under the MIT License (MIT)
/// You may obtain a copy of the License at
/// http://opensource.org/licenses/mit-license.html
/// </license>
(function ($, kendo) {
var NS = ".kendoExtRadioButtonGroup";
var ExtRadioButtonGroup = kendo.ui.Widget.extend({
/// <summary>Displays radio buttons from a kendo.data.DataSource.</summary>
options: {
// <summary>The data source of the widget which is used to display a list of radio buttons.</summary>
dataSource: null,
/// <summary>The field of the data item that provides the text content of the radio buttons.</summary>
dataTextField: "",
/// <summary>The field of the data item that provides the value of the widget.</summary>
dataValueField: "",
/// <summary>The name given to the radio button group.</summary>
groupName: "",
/// <summary>Name of the widget.</summary>
name: "ExtRadioButtonGroup",
/// <summary>Specifies the orientation of the widget. Supported values are "horizontal" and "vertical".</summary>
orientation: "vertical"
},
events: [
/// <summary>Fired when the user selects a radio button.</summary>
"change",
/// <summary>Fired when the widget is bound to data from its data source.</summary>
"dataBound"
],
/// <summary>Data source for the widget.</summary>
dataSource: null,
init: function (element, options) {
/// <summary>Initialize the widget.</summary>
...