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>