Select or Deselect All MultiSelect Items
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 select or deselect all items in the Kendo UI MultiSelect widget by using external buttons?
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>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>
<button class="k-button" id="select">Select All</button>
<button class="k-button" id="deselect">Deselect All</button>
</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().data("kendoMultiSelect");
$("#select").click(function() {
var values = $.map(required.dataSource.data(), function(dataItem) {
return dataItem.value;
});
required.value(values);
});
$("#deselect").click(function() {
required.value([]);
});
});
</script>
</div>