Hi ,
I tried to create a custom widget , which has a radio button and Kendo UI Combobox . But its not returning combobox's value. Following is the code.i am using it with Require.js. the method "comboboxvalue" and "viewByValue" not working.Please let me know what I am doing wrong.
define(['auth'], function(auth) {
var kendo = window.kendo;
var ui = kendo.ui;
var Widget = ui.Widget;
CHANGE = "change";
var rugView = Widget.extend(
{
init: function(element, options) {
var that = this,
id,
_combobox,
_viewBy,
plugin;
Widget.fn.init.call(this, element, options);
_combobox = $("<div id='cbRugYearDate'></div>");
_viewBy = $('<div>View By:<input type="radio" id="rvViewBy" name="rvViewBy" checked value="C" /> Consolidated <input type="radio" id="rvViewBy" name="rvViewBy" value="F" />Facility</div>');
that.element.append(_viewBy);
that.element.append(_combobox);
that.combobox = _combobox.val("").kendoComboBox(
{
dataTextField: "RugYear",
dataValueField: "RugYear",
minLength: 3,
dataSource: {
transport: {
read: function(options) {
auth.ajax({
type: 'GET',
url: 'api/Clinical/RUGYears',
dataType: "json",
success: function(result) {
options.success(result);
},
error: function(result) {
alert("read error - " + result.error);
}
});
}
}
},
index: 0
});
that.combobox.on("change", $.proxy(that._change, that));
$("input[name='rvViewBy']").on("click", $.proxy(that._change, that));
//that.combobox.bind("change", function() {
// that.refresh();
//});
//kendo.ui.progress(_loader, false);
},
options: {
name: "RugView",
autoBind: true
},
events: [
CHANGE
],
//Fire the external event: CHANGE
_change: function(element) {
var that = this;
that.trigger(CHANGE, { element: element });
return that;
},
comboboxvalue: function()
{
var that = this;
var cbBox = $('#cbYearDate').data("kendoComboBox");
//var cbBox = that._combobox.data("kendoComboBox");
return cbBox.value();
},
viewbyvalue: function()
{
return $('input[name="rvViewBy"]:checked').val();
}
});
ui.plugin(rugView);
});