How do I get all list items from a KendoComboBox

Question

I'm trying to get all the list items from a KendoComboBox.

The list has been built using a custom angularjs directive:

1. html

   <input id="comboBox" />
   

2. sgComboBoxField directive:

   'use strict';
    angular.module('sgComponents').directive('sgComboBoxField', ['sgComboBoxService',
       function(sgComboBoxService) {
   
          return { 
             link: function (scope, element, attrs, ctrls) {
                var dropdownlist = element.find('#comboBox');
                dropdownlist.kendoComboBox({
                   //various options needed to set up the combox (like datasource) obtained from service
                )};
                // tried a breakpoint here in chrome but the items are not visible!
             }
          }
    }]);
   

My question is, how do I get all the list items from the combobox once it is loaded on the DOM?

Answer 1

The solution is to use a $timeout to give the DOM time to load, convert the dropdownlist object to a kendo object ( using data('kendoComboBox') ) and then to call jquery functions on it to get the list's children:

$timeout(function() {                    
   var listItems = dropdownlist.data('kendoComboBox').ul.children();
   listItems.each(function(index) {
      console.log($(this));
   });                   
});