Enable / Disable kendo ui drop down list using AngularJS ng-disabled

Question

I am unable to get the following example working in IE9. The drop down list does not enable or disable.

Using AngularJS v1.2.22 and Kendo UI v2014.2.903

Any help would be much appreciated.

HTML:

<div kendo-drop-down-list k-data-source="names" ng-model="selected" ng-disabled="disabled">
</div> 
<label>ng-disable 
   <input type="checkbox" ng-model="disabled" /> 
</label> 
<div kendo-drop-down-list k-data-source="names" ng-model="selected" k-enable="enabled">
</div> 
<label>k-enable 
   <input type="checkbox" ng-model="enabled" /> 
</label> 
<pre>DISABLED: {{disabled}} ENABLED: {{enabled}}</pre>

JS:

$scope.names = ['Option 1', 'Option 2', 'Option 3'];
$scope.enabled = true;

ng-disabled="disabled" is what you have on your markup, but $scope.enabled = true is what you have in your code — sma
$scope.disabled = true; could also be in the js code, it is not required as the model value will be initialised when the check box is clicked. — gman7911

Gerard Setho Gerard Setho · Accepted Answer · 2014-11-03T17:46:09

Kendo's Dropdown List and Combobox does seem to have trouble binding to ng-disabled in IE9.

I have a workaround. Details are here. Complete with Plunker code.

Basically,

you have to manually watch for whatever is inside the ng-disabled attribute yourself.
Then call the enable() function of Kendo's Combobox yourself. Dropdown Lists should work similarly.

hth

Enable / Disable kendo ui drop down list using AngularJS ng-disabled

2 Answers