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...