Edit this page

Select All MultiSelect Items by Clicking the Group

Environment

Product Version 2018.2.516
Product MultiSelect for ProgressĀ® Kendo UIĀ®

Description

How can I select all items from a group in the MultiSelect by clicking the group?

Solution

  1. Attach a click handler to the group element.
  2. Get all items from the clicked group and pass them to the value method to select them.
<select id="customers"></select>

<script>
    $(document).ready(function () {
        $("#customers").kendoMultiSelect({
            placeholder: "Select customers...",
            dataTextField: "ContactName",
            dataValueField: "CustomerID",
            height: 400,
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                group: { field: "Country" }
            }
        });

        $(".k-list-scroller").delegate(".k-group", "click", function () {
            var ms = $("#customers").data("kendoMultiSelect");
            var data = ms.dataSource.data();
            var msValue = [];

            for (var i = 0; i < data.length; i++) {
                if (data[i].Country == this.textContent) {
                    msValue.push(data[i].CustomerID);
                }
            }

            ms.value(msValue);
        });
    });
</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