/// Kendo UI Radio Button Group Widget.
/// Kendo UI widget that displays a radio button group.
/// 1.0
/// John DeVight
///
/// Licensed under the MIT License (MIT)
/// You may obtain a copy of the License at
/// http://opensource.org/licenses/mit-license.html
///
(function ($, kendo) {
var NS = ".kendoExtRadioButtonGroup";
var ExtRadioButtonGroup = kendo.ui.Widget.extend({
/// Displays radio buttons from a kendo.data.DataSource.
options: {
// The data source of the widget which is used to display a list of radio buttons.
dataSource: null,
/// The field of the data item that provides the text content of the radio buttons.
dataTextField: "",
/// The field of the data item that provides the value of the widget.
dataValueField: "",
/// The name given to the radio button group.
groupName: "",
/// Name of the widget.
name: "ExtRadioButtonGroup",
/// Specifies the orientation of the widget. Supported values are "horizontal" and "vertical".
orientation: "vertical"
},
events: [
/// Fired when the user selects a radio button.
"change",
/// Fired when the widget is bound to data from its data source.
"dataBound"
],
/// Data source for the widget.
dataSource: null,
init: function (element, options) {
/// Initialize the widget.
kendo.ui.Widget.fn.init.call(this, element, options);
this._dataSource();
// Read the data from the data source.
this.dataSource.fetch();
// Attach an event handler to the selection of a radio button.
this.element.on("click" + NS, ".k-radio-label", { sender: this }, this._onRadioButtonSelected);
this.element.css({ "display": "inline-block" });
},
destroy: function () {
/// Destroy the widget.
$(this.element).off(NS);
kendo.ui.Widget.fn.destroy.call(this);
},
_dataSource: function () {
/// Initialize the data source.
var dataSource = this.options.dataSource;
// If the data source is an array, then define an object and set the array to the data attribute.
dataSource = $.isArray(dataSource) ? { data: dataSource } : dataSource;
// If there is a data source defined already.
if (this.dataSource && this._refreshHandler) {
// Unbind from the change event.
this.dataSource.unbind("change", this._refreshHandler);
} else {
// Create the refresh event handler for the data source change event.
this._refreshHandler = $.proxy(this.refresh, this);
}
// Initialize the data source.
this.dataSource = kendo.data.DataSource.create(dataSource).bind("change", this._refreshHandler);
},
_template: function () {
/// Get the template for a radio button.
var html = kendo.format("
#: {2} #
",
this.options.groupName.length === 0 ? kendo.guid() : this.options.groupName,
this.options.dataValueField, this.options.dataTextField,
this.options.orientation === "vertical" ? "block" : "inline-block");
return kendo.template(html);
},
_onRadioButtonSelected: function (e) {
/// Handle the selection of a radio button.
var $target = $(this),
that = e.data.sender;
that.element.find(".k-radio").prop("checked", false).removeClass("k-state-selected");
$target.prev(".k-radio").prop("checked", true).addClass("k-state-selected");
var dataItem = that.dataItem();
that.trigger("change", { dataItem: dataItem });
},
setDataSource: function (dataSource) {
/// Sets the data source of the widget.
this.options.dataSource = dataSource;
this._dataSource();
this.dataSource.fetch();
},
refresh: function (e) {
/// Renders all radio buttons using the current data items.
var template = this._template();
// Remove all the existing items.
this.element.empty();
// Add each of the radio buttons.
for (var idx = 0; idx < e.items.length; idx++) {
this.element.append(template(e.items[idx]));
}
// Fire the dataBound event.
this.trigger("dataBound");
},
dataItem: function () {
/// Gets the dataItem for the selected radio button.
var uid = this.element.find(".k-radio:checked").closest(".k-ext-radiobutton-item").attr("data-uid");
return this.dataSource.getByUid(uid);
},
text: function () {
/// Gets or sets the text of the radio button group.
if (arguments.length === 0) {
return this.element.find(".k-state-selected").closest(".k-ext-radiobutton-item").attr("data-text");
} else {
this.element.find(kendo.format(".k-ext-radiobutton-item[data-text='{0}']", arguments[0])).find(".k-radio-label").click();
}
},
value: function () {
/// Gets or sets the value of the radio button group.
if (arguments.length === 0) {
return this.element.find(".k-state-selected").closest(".k-ext-radiobutton-item").attr("data-value");
} else {
this.element.find(kendo.format(".k-ext-radiobutton-item[data-value='{0}']", arguments[0])).find(".k-radio-label").click();
}
}
});
kendo.ui.plugin(ExtRadioButtonGroup);
})(window.kendo.jQuery, window.kendo);