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:
- In the
change
event handler of the MultiSelect, based on thedataItems
, add thek-selected
class and set thechecked
property of the checkbox for every row in the Grid. -
In the
change
event handler of the Grid, based on theselect
items, change thevalue
of the MultiSelect.<select id="multiselect" multiple="multiple"></select> <div id="grid"></div> <script> $("#multiselect").kendoMultiSelect({ dataSource: { transport: { read: { url: "https://demos.telerik.com/kendo-ui/service/products", dataType: "jsonp" } } }, 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/kendo-ui/service/products", dataType: "jsonp" } } } }); </script>