Monday, November 3, 2014

Kendo + Angular + IE9 = a big mess

Using Kendo UI and Angular JS and getting it to work in IE9 is just a huge pain.

The newest form of this torture comes in trying to get ng-disabled to work with Kendo's Combobox. Here is the Plunker.

It works fine in any browser except IE9 (I haven't tried IE10 or 11).

Basically consists of:

  1. A checkbox. This checkbox will modify a boolean "isComboDisabled". 
  2. A word, either "true" or "false", depending on the boolean "isComboDisabled". 
  3. A Kendo Combobox, with the ng-disabled attribute bound to the boolean "isComboDisabled".
In Safari, as expected, when I:
  1. check the checkbox, 
  2. the word says "true", 
  3. and the Combobox is disabled.

In IE9, when I:

  1. check the checkbox, 
  2. the word says "true", 
  3. and the Combobox is remains enabled.
It appears that AngularJS is doing its job; the binding works fine. But somewhere between Kendo and AngularJS, ng-disabled of a Kendo Combobox doesn't bind. This also happens for a Kendo Dropdown List.

The workaround is u-ge-ly. The Plunker is here
  1. I watch for changes to the boolean.
  2. And I call Kendo's enable() function directly.
Days like this, I long for the Adobe Flash era...


  1. Thanks for this! ... I am experiencing the same issue with multiple Kendo controls on IE10, and finally a fix.

    You are right that it isn't pretty, but I guess you gotta do what you gotta do :)

    1. Thanks for your comment leJuan5150. Because I was really starting to feel like I was the only one experiencing this.

  2. Hi Gerard,

    Just thought I would let you know that I spoke to Kendo Support and they suggested using webcomponents.js to enable mutation observer support in older browsers (such as IE9/10) ...

    I simply referenced the library in my page and ng-disabled worked as expected in IE10.

  3. Hi all, since webcomponents is not IE9 supoorted, I made this:
    it is a small directive which attach a watcher to all dropdown and on disabled change calls kendo enable method.