kendo combobox giving error while enabling and disabling - combobox

Question

I am using kendo combobox. I have written below code to enable and disable combobox
function enableDisableFrameworkAndAltFrameworkVersion(platformVersion) {
var comboBox = $("#selFrameworkVersion").data("kendoComboBox");
if (platformVersion === 1 ) {
comboBox.enable(false);
}
}
But this code gives me error as "Uncaught TypeError: Cannot call method 'enable' of undefined "
Please help. Thanks in advance.
Now i followed one example on this link below
Disable kendo combo
So now i changed code in my html and added enabled parameter to kendo combobox like below
<input id="selFrameworkVersion" data-bind="kendoComboBox: { dataTextField: 'Name', dataValueField: 'Id', data: $root.versionListByProductType, value: $root.editFrameworkVersion, enabled: enableFrameWorkCombo} />
In my view model i declare one observable like below
self.enableFrameWorkCombo = ko.observable(true);
Then changed my function like below
function enableDisableFrameworkAndAltFrameworkVersion(platformVersion) {
var comboBox = $("#selFrameworkVersion").data("kendoComboBox");
if (platformVersion === 1 ) {
$('#multiAltVersion').attr("disabled", true);
//comboBox.enable(false);
self.enableFrameWorkCombo(false);
return;
}
else if (platformVersion === 2 || platformVersion === 3) {
//comboBox.enable(true);
self.enableFrameWorkCombo(true);
$('#multiAltVersion').attr("disabled", true);
}
else {
//comboBox.enable(true);
self.enableFrameWorkCombo(true);
$('#multiAltVersion').attr("disabled", false);
}
}
Now it gives me error
Uncaught Error: Unable to parse bindings.
Message: ReferenceError: enableFrameWorkCombo is not defined;
Bindings value: kendoComboBox: { dataTextField: 'Name', dataValueField: 'Id', data: $root.versionListByProductType, value: $root.editFrameworkVersion, enabled: enableFrameWorkCombo, optionsCaption: 'Please select Version...' }
What am i doing wrong here?

Answer 1

The fact that is shows "Uncaught TypeError: Cannot call method 'enable' of undefined " while executing:
function enableDisableFrameworkAndAltFrameworkVersion(platformVersion) {
var comboBox = $("#selFrameworkVersion").data("kendoComboBox");
if (platformVersion === 1 ) {
comboBox.enable(false);
}
}
means that comboBox is undefined. Since it is the result of computing $("#selFrameworkVersion").data("kendoComboBox") means that there is an HTML element with id selFrameworkVersion but it is not a kendoComboBox.
Please, check that when you invoke this function, kendoComboBox is actually initialized.
EDIT:
The following example (running on http://jsfiddle.net/OnaBai/qtaAS/) enables / disable a ComboBox using above function...
function enableDisableFrameworkAndAltFrameworkVersion(platformVersion) {
var comboBox = $("#selFrameworkVersion").data("kendoComboBox");
console.log("combobox", comboBox);
if (platformVersion === 1) {
comboBox.enable(false);
} else {
comboBox.enable(true);
}
}
var viewModel = kendo.observable({
data : [
{ "Id": 1, "Name": "node1" },
{ "Id": 2, "Name": "node2" },
{ "Id": 3, "Name": "node3" },
{ "Id": 4, "Name": "node4" },
{ "Id": 5, "Name": "node5" }
],
enableFrameWorkCombo: function () {
alert("hello");
}
});
$("#disable").on("click", function () {
enableDisableFrameworkAndAltFrameworkVersion(1);
});
$("#enable").on("click", function () {
enableDisableFrameworkAndAltFrameworkVersion(2);
});
kendo.bind($("#selFrameworkVersion"), viewModel);
And the HTML is:
<div>Disable</div>
<div>Enable</div>
<input id="selFrameworkVersion"
data-role="combobox"
data-text-field="Name"
data-value-field="Id"
value="2"
data-bind="source : data, enabled: enableFrameWorkCombo"/>