Kendo Angular multiselect set selected values

Question

I´m using Kendo multiselect with Angular-Kendo directives and with remote datasource. I´m trying to set the selected items when the application starts but with no luck. Can anyone please help me?

See Code here: JS Bin

Answer 1

You can just make a custom directive, and pass in the items you want selected beforehand to the value attribute of the multiselect directive, have a look at this Plunk to see the directive I use.

Answer 2

You have to hook into the on change event directive and send the kendoEvent. Then you can use the supported kendo methods on e.sender. Check it out on this plunker

    <select id="required" multiple="multiple"  kendo-multi-select k-on-change="changed(kendoEvent)">
        <option>Steven White</option>
        <option>Nancy King</option>
        <option>Nancy Davolio</option>
        <option>Robert Davolio</option>
        <option>Michael Leverling</option>
        <option>Andrew Callahan</option>
        <option>Michael Suyama</option>
        <option selected>Anne King</option>
        <option>Laura Peacock</option>
        <option>Robert Fuller</option>
        <option>Janet White</option>
        <option>Nancy Leverling</option>
        <option>Robert Buchanan</option>
        <option>Margaret Buchanan</option>
        <option selected>Andrew Fuller</option>
        <option>Anne Davolio</option>
        <option>Andrew Suyama</option>
        <option>Nige Buchanan</option>
        <option>Laura Fuller</option>
    </select>

    var app = angular.module('app', ['kendo.directives']); 

    app.controller("myCtrl", function ($compile, $scope) {

      $scope.changed = function(e) {
      console.log(e.sender.dataItems());
      };

    });