Edit this page

Filter Values in Widgets Sharing the Same Data

The example below demonstrates how to filter the values of two Kendo UI widgets sharing same data based on user selection.

Example
    <select id="multiselect1">
    </select>
    <br />
    <select id="multiselect2">
    </select>
    <script>
      var initialData = [{id:1, name: "item1"}, {id:2, name: "item2"}, {id:3, name: "item3"}];

      function distinctValues(values) {
        return initialData.filter(function(current){
          return values.filter(function(initial){
            return initial == current.id
          }).length == 0
        });
      }

      $("#multiselect1").kendoMultiSelect({
        dataSource: initialData,
        dataTextField: "name",
        dataValueField: "id",
        change: function() {
          var ms2 = $("#multiselect2").getKendoMultiSelect();
          var values = distinctValues(this.value());
          ms2.dataSource.data(values);
        }
      });

      $("#multiselect2").kendoMultiSelect({
        dataTextField: "name",
        dataValueField: "id",
        dataSource: initialData,
        change: function() {
          var ms1 = $("#multiselect1").getKendoMultiSelect();
                    var values = distinctValues(this.value());
          ms1.dataSource.data(values);
        }
      });
    </script>

See Also

Other articles on Kendo UI MultiSelect:

Copyright © 2002-2015 Telerik Inc. All rights reserved.