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

Select or Deselect All MultiSelect Items


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


How can I select or deselect all items in the Kendo UI MultiSelect widget by using external buttons?


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>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>
        <button class="k-button" id="select">Select All</button>
        <button class="k-button" id="deselect">Deselect All</button>
      <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;
        $(document).ready(function() {
          // create MultiSelect from select HTML element
          var required = $("#required").kendoMultiSelect().data("kendoMultiSelect");

          $("#select").click(function() {
            var values = $.map(, function(dataItem) {
              return dataItem.value;


          $("#deselect").click(function() {

See Also

In this article