Search code examples
angularjskendo-uiinternet-explorer-9

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


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;

Solution

  • 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,

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

    hth