Select All MultiSelect Items by Clicking the Group

Environment

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

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.

    <style>
      .k-list-item-group-label {
        cursor: default;
      }
    </style>

    <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-list-item-group-label", "click", groupClick);

        function groupClick() {
          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);
          ms.close();
        }
      });
    </script>