New to Kendo UI for jQuery? Download free 30-day trial

Keep View and Model in Sync


Avoid changing the IDs of the Data Source to achieve the desired custom item selection logic inside the Kendo UI MultiSelect.

To keep the view and model in sync:

  1. Attach an event listener to the select event by using k-on-select.

  2. If "Unknown" is selected, all other options are deselected by assigning the value of "Unknown" to the model.

    $scope.selectedIds = [0];
  3. If any other option is selected, find the "Unknown" option and remove it from the model. Then, add the current selection.

You can implement a similar result by following the same steps and using the change event handler. In this case, it is not necessary to add the current selection from Step 3.

The following example demonstrates how to keep in sync the view and the model of a Kendo UI MultiSelect in AngularJS applications.

  <base href="">
  <div id="example" ng-app="KendoDemos">
      <div class="demo-section k-content" ng-controller="MyCtrl">
        <select id="multiselect" kendo-multi-select k-options="selectOptions" k-ng-model="selectedIds" k-on-select="onSelect(kendoEvent)" k-value-primitive="true" k-rebind="selectedIds"></select>
        <p style="padding-top: 1em;">Selected:  {{ selectedIds }} </p>


    angular.module("KendoDemos", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope){

      $scope.onSelect = function(ev){

        var selectedId = ev.sender.dataItem(ev.item).Id;

        if(selectedId === 0){
          $scope.selectedIds = [0];
        } else {
          var index = $scope.selectedIds.indexOf(0);
          if (index > -1) {               
            $scope.selectedIds.splice(index, 1);

      $scope.selectOptions = {
        placeholder: "Select products...",
        dataTextField: "Name",
        dataValueField: "Id",
        valuePrimitive: true,
        autoBind: false,
        dataSource: [
          { Name: "Option 1", Id: 1 },
          { Name: "Option 2", Id: 2 },
          { Name: "Option 3", Id: 3 },
          { Name: "UNKNOWN", Id: 0 },

      $scope.selectedIds = [2,3];


See Also

For more runnable examples on the Kendo UI MultiSelect, browse its How To documentation folder.

In this article
Not finding the help you need? Improve this article