New to Kendo UI for jQuery? Download free 30-day trial

Select All MultiSelect Values with a Single Selection

Environment

Product Progress® Kendo UI® MultiSelect for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript

Description

How can I create a dataItem that holds an all-value, which selects all items in the Kendo UI MultiSelect widget?

Solution

The following example demonstrates how to achieve the desired scenario.

    <div id="example" role="application">
    <div class="demo-section k-header">
      <h2>Invite Attendees</h2>
      <label for="required">Required</label>
      <select id="required" multiple="multiple" data-placeholder="Select attendees...">
        <option>ALL</option>
        <option>Steven White</option>
        <option>Nancy King</option>
        <option>Nancy Davolio</option>
        <option>Robert Davolio</option>
        <option>Michael Leverling</option>
        <option>Andrew Callahan</option>
        <option>Michael Suyama</option>
        <option selected>Anne King</option>
        <option>Laura Peacock</option>
        <option>Robert Fuller</option>
        <option>Janet White</option>
        <option>Nancy Leverling</option>
        <option>Robert Buchanan</option>
        <option>Margaret Buchanan</option>
        <option selected>Andrew Fuller</option>
        <option>Anne Davolio</option>
        <option>Andrew Suyama</option>
        <option>Nige Buchanan</option>
        <option>Laura Fuller</option>
      </select>
    </div>
    <style scoped>
      .demo-section {
        width: 350px;
        min-height: 140px;
      }
      .demo-section h2 {
        font-weight: normal;
      }
      .demo-section label {
        display: inline-block;
        margin: 15px 0 5px 0;
      }
      .demo-section select {
        width: 350px;
      }
      #get {
        float: right;
        margin: 25px auto 0;
      }
    </style>
    <script>
      $(document).ready(function() {
        // create MultiSelect from select HTML element
        var required = $("#required").kendoMultiSelect({
          select: function(e) {
            var dataItem = this.dataSource.view()[e.item.index()];
            var values = this.value();

            if (dataItem.value === "ALL") {
                this.value(values.includes("ALL") ? "ALL" : "");
            } else if (values.indexOf("ALL") !== -1) {
              values = $.grep(values, function(value) {
                return value !== "ALL";
              });

              this.value(values.length === this.dataSource.view().length -1 ? "" : values);
            }
          }
        }).data("kendoMultiSelect");
      });
    </script>
  </div>

The following example demonstrates how to select all items by selecting the ALL item.

    <div id="example" role="application">
      <div class="demo-section k-header">
        <h2>Invite Attendees</h2>
        <label for="required">Required</label>
        <select id="required" multiple="multiple" data-placeholder="Select attendees...">
          <option>ALL</option>
          <option>Steven White</option>
          <option>Nancy King</option>
          <option>Nancy Davolio</option>
          <option>Robert Davolio</option>
          <option>Michael Leverling</option>
          <option>Andrew Callahan</option>
          <option>Michael Suyama</option>
          <option selected>Anne King</option>
          <option>Laura Peacock</option>
          <option>Robert Fuller</option>
          <option>Janet White</option>
          <option>Nancy Leverling</option>
          <option>Robert Buchanan</option>
          <option>Margaret Buchanan</option>
          <option selected>Andrew Fuller</option>
          <option>Anne Davolio</option>
          <option>Andrew Suyama</option>
          <option>Nige Buchanan</option>
          <option>Laura Fuller</option>
        </select>
      </div>
      <style scoped>
        .demo-section {
          width: 350px;
          min-height: 140px;
        }
        .demo-section h2 {
          font-weight: normal;
        }
        .demo-section label {
          display: inline-block;
          margin: 15px 0 5px 0;
        }
        .demo-section select {
          width: 350px;
        }
        #get {
          float: right;
          margin: 25px auto 0;
        }
      </style>
      <script>
        $(document).ready(function() {
            // create MultiSelect from select HTML element
            function contains(value, values) {
                for (var idx = 0; idx < values.length; idx++) {
                if (values[idx] === value) {
                    return true;
                }
              }

              return false;
            }

            var required = $("#required").kendoMultiSelect({
              select: function(e) {
                var dataItemValue = this.dataSource.view()[e.item.index()].value;
                var values = this.value();

                if (dataItemValue !== "ALL" && contains(dataItemValue, values)) {
                    return;
                }

                if (dataItemValue === "ALL") {
                  values = [];
                } else if (values.indexOf("ALL") !== -1) {
                  values = $.grep(values, function(value) {
                    return value !== "ALL";
                  });
                }

                values.push(dataItemValue);
                this.value(values);
                this.trigger("change"); //notify others for the updated values

                e.preventDefault();
              }
            }).data("kendoMultiSelect");
        });
      </script>
    </div>

See Also

In this article