Share Selection between MultiSelect and Grid

Environment

Product	Progress® Kendo UI® Grid for jQuery	Progress® Kendo UI® MultiSelect for jQuery
Product Version	Created with the 2017.3.1026 version

Description

How can I select rows in the Grid by choosing values in the MultiSelect, and vice versa?

Solution

To share a selection between a MultiSelect and a Grid:

1. In the change event handler of the MultiSelect, based on the dataItems, add the k-selected class and set the checked property of the checkbox for every row in the Grid.

2. In the change event handler of the Grid, based on the select items, change the value of the MultiSelect.

   <select id="multiselect" multiple="multiple"></select>
   <div id="grid"></div>
   <script>
       $("#multiselect").kendoMultiSelect({
           dataSource: {
               transport: {
                   read: {
                       url: "https://demos.telerik.com/service/v2/core/products"
                   }
               }
           },
           dataTextField: "ProductName",
           dataValueField: "ProductID",
           change: function(e) {
               var grid = $("#grid").data("kendoGrid");
               var gridItems = grid.dataSource.data();
               var dataItems = e.sender.dataItems();
               var ids = [];
               var selectedRows = grid.element.find(".k-selected");
   
               dataItems.forEach(function(e) {
                   var id = e.ProductID;
                   ids.push(id);
               });
   
               selectedRows.each(function(e) {
                   var row = $(this);
   
                   row.removeClass("k-selected");
                   row.find("[data-role='checkbox']")[0].checked = false;
               });
   
   
               for (var i = 0; i < gridItems.length; i++) {
                   var dataItem = gridItems[i];
                   var id = dataItem.ProductID;
   
                   if (ids.indexOf(id) >= 0) {
                       var uid = dataItem.uid;
                       var row = grid.element.find("[data-uid=" + uid + "]");
   
                       $(row).addClass("k-selected");
                       $(row).find("[data-role='checkbox']")[0].checked = true;
                   }
               }
           }
       });
       $("#grid").kendoGrid({
           columns: [{
                   selectable: true
               },
               {
                   field: "ProductName"
               }
           ],
           change: function(e) {
               var multiSelect = $("#multiselect").data("kendoMultiSelect");
               var grid = e.sender;
               var rows = grid.select();
               var ids = [];
   
               rows.each(function(e) {
                   var id = grid.dataItem(this).ProductID;
   
                   ids.push(id);
               });
   
               multiSelect.value(ids);
           },
           dataSource: {
               transport: {
                   read: {
                       url: "https://demos.telerik.com/service/v2/core/products"
                   }
               }
           }
       });
   </script>