3

I have a select which is being populated using angular binding.

<select class='clsBucket' id='optBuckets' ng-options='opt as opt.name for opt in buckets' ng-model='bucketSelected' ng-change='changeBucket()'>

Now i want to apply the Kendo dropdownlist style on this select , but i don't want to populate the options using kendo datasource etc and continue to do that using angular.

If i use $('#optBuckets').kendoDropDownList() then i get the requiired style applied but the binding data is lost.

Any help in order to resolve that is highly appreciated.

Rupam Roy
  • 113
  • 1
  • 8
  • Did you find a solution? – Daniel Sklenitzka Jun 03 '15 at 05:24
  • I am just updating this since it may be required by someone. In angular apply the kendoDropDownList only after you get the data. ` $http('/xx').get().success(function(){ $timeout(function(){ $('#optBuckets').kendoDropDownList() } } ` – Rupam Roy Jun 08 '15 at 15:27

1 Answers1

0

The above code lists "buckets" as the data source. With that in mind, the promise which assigns 'buckets' to the scope should have it's promise exposed on the scope. From there a directive can access it (here called 'bucketsPromise')

The code in the controller may look like such:

$scope.bucketsPromise = bucketsService.get().then(function(data) {
  $scope.buckets = data;
}).promise;

The directive will the appear as such:

.directive('angularToKendoDropdown', function() {
  return {
    scope: {
      'bindToCtrl': '&dataSourcePromise'
    },
    link: function(scope, element, attr) {
        scope.bindToCtrl.then(function() {
          $(element).kendoDropDownList();
        })
    }
 };
});

The given select would appear as such:

<select class='clsBucket angular-to-kendo-dropdown' id='optBuckets'
        ng-options='opt as opt.name for opt in buckets'
        ng-model='bucketSelected' ng-change='changeBucket()'
        data-source-promise='bucketsPromise'>
</select>
FesterCluck
  • 320
  • 1
  • 7