1

I've got a dropdown list defined using angular like this:

<select class="form-control"
        ng-model="controller.selectedUser.superiorId"
        ng-options="superior.userId as superior.lastName + ' ' + superior.firstName for superior in controller.superiors | orderBy:['lastName', 'firstName']"></select>

This works fine, however I want to show a little image next to the entries and so I'm trying to convert this to a Kendo drop down list where you can define an HTML template (like this).

I would like to continue using the concise ng-options syntax and rather not use the Kendo DataSource approach which feels a bit clumsy IMHO. I do need the dropdown to refresh when I update the superiors array in the controller, but I can't seem to get it to work. I've tried ng-options, k-ng-options (as suggested here), but all I get is an empty dropdown.

The general lack of information (e.g. no answer here for 7 months) makes me wonder if this should be possible at all.

Any help is appreciated.

Community
  • 1
  • 1
Daniel Sklenitzka
  • 2,116
  • 1
  • 17
  • 25

1 Answers1

4

The is because the kendo-drop-down-list directive acts on the element before ng-options gets a chance to populate it with the <option> elements that the dropdown widget needs. The same problem occurs when using kendo widgets on something that has ng-repeat elements.

Unfortunately kendo's integration with Angular is incomplete and hackish in many ways, so half-workarounds are to delay creating the dropdown until a controller variable is available, or rebuild the dropdown when a controller variable changes.

None of these options are really optimal. The first option doesn't help with refreshing the list of options when the controller variables changes and rebuilding the widget could mean losing the ng-model binding among other things.

It's a limitation of the approach they've chosen to use for integrating with Angular and one of those things not really worth the fuss of trying to hack around. Just go with their recommended approach of using data sources.

I'd also encourage not fluffing up select elements since many browsers these days have native handling for them, especially on mobile devices.

user2943490
  • 6,900
  • 2
  • 22
  • 38