Edit this page

Share Selection between MultiSelect and Grid

Environment

Product Progress Kendo UI Grid Progress Kendo UI MultiSelect
Progress Kendo UI 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-state-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/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-state-selected");
    
                dataItems.forEach(function(e) {
                    var id = e.ProductID;
                    ids.push(id);
                });
    
                selectedRows.each(function(e) {
                    var row = $(this);
    
                    row.removeClass("k-state-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-state-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>
    
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy