Keep View and Model in Sync

Important

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.

Example

  <base href="https://demos.telerik.com/kendo-ui/multiselect/angular">
  <div id="example" ng-app="KendoDemos">
      <div class="demo-section k-content" ng-controller="MyCtrl">
        <h2>Options</h2>
        <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>
      </div>
    </div>
    </div>

  <script>

    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.selectedIds.push(selectedId);
          }
        }
      }

      $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];

    });
  </script>
  </div>

See Also

• MultiSelect JavaScript API Reference
• How to Cascade from DropDownList
• How to Filter Values in Widgets Sharing the Same Data
• How to Preselect Items Using MVVM Binding
• How to Reorder Selected Items
• How to Select All Values with Single Selection
• How to Use MultiSelect with Bootstrap Modal Window
• How to Wire Blur Event of the Filter Input

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