Skip to content

Commit 373ac6d

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 4774e0f commit 373ac6d

File tree

2 files changed

+172
-2
lines changed

2 files changed

+172
-2
lines changed

‎docs/knowledge-base/how-to-add-select-all-multiselect.md‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
---
2+
title: Adding "Select All" CheckBox the HeaderTemplate of MultiSelect
3+
description: Learn how to implement a "Select All" checkbox using the headerTemplate in the MultiSelect component.
4+
type: how-to
5+
page_title: How to Implement "Select All" Checkbox in Kendo UI MultiSelect
6+
slug: how-to-add-select-all-multiselect
7+
tags: kendo-ui, multiselect, select-all, headertemplate, tagmode
8+
res_type: kb
9+
ticketid: 1666066
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>MultiSelect for JSP</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>2024.3.806</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
29+
I want to add a "Select All" checkbox in the MultiSelect component to allow users to select or deselect all items in the dropdown. How can I achieve this using the `headerTemplate`?
30+
31+
This KB article also answers the following questions:
32+
- How to implement a "Select All" feature in MultiSelect?
33+
- How to customize the header of the MultiSelect popup?
34+
- How to manage multiple selections in MultiSelect through a single checkbox?
35+
36+
## Solution
37+
38+
To add a "Select All" checkbox in the MultiSelect component, use the [`headerTemplate`](https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect/configuration/headertemplate) configuration. This template renders a checkbox at the top of the dropdown list. By interacting with this checkbox, users can select or deselect all items. Additionally, the [`tagMode`](/api/javascript/ui/multiselect/configuration/tagmode) configuration controls the display of selected items - having a separate tag for every item or a single tag with the count of the selected items.
39+
40+
Here's an example to achieve this functionality:
41+
42+
1. Define the MultiSelect and its `headerTemplate`:
43+
44+
```html
45+
<input id="multiselect" />
46+
<script>
47+
$("#multiselect").kendoMultiSelect({
48+
dataSource: ["Item1", "Item2", "Item3", "Item4"],
49+
headerTemplate: '<input type="checkbox" id="checkAll" /><label for="checkAll">Select All</label>',
50+
tagMode: "single" // or "multiple" for individual tags
51+
});
52+
</script>
53+
```
54+
55+
2. Handle the `change` event of the 'Select All' checkbox to select/deselect the needed values in the MultiSelect when the checkbox is checked/unchecked:
56+
57+
```javascript
58+
$('#selectAll').change(function() {
59+
var multiSelect = $("#FeaturesSelect").data("kendoMultiSelect");
60+
if($(this).prop('checked')){
61+
selectAll();
62+
}
63+
else{
64+
multiSelect.value(null);
65+
$("#FeaturesSelect_listbox > li > input").prop("checked",false);
66+
}
67+
});
68+
69+
function selectAll() {
70+
var multiselect = $("#FeaturesSelect").data("kendoMultiSelect");
71+
var selectedValues = [];
72+
for (var i = 0; i < multiselect.dataSource.data().length; i++) {
73+
var item = multiselect.dataSource.data()[i];
74+
selectedValues.push(item.value);
75+
}
76+
77+
$("#FeaturesSelect_listbox > li > input").prop("checked", true);
78+
multiselect.value(selectedValues);
79+
multiselect.close();
80+
}
81+
```
82+
Below is a runnable Dojo example where the full implementation is demonstrated:
83+
84+
```dojo
85+
<div id="example" role="application">
86+
<div class="demo-section k-header">
87+
<select id="FeaturesSelect" multiple="multiple" data-placeholder="Select attendees...">
88+
<option>Steven White</option>
89+
<option>Nancy King</option>
90+
<option>Nancy Davolio</option>
91+
<option>Robert Davolio</option>
92+
<option>Michael Leverling</option>
93+
<option>Andrew Callahan</option>
94+
<option>Michael Suyama</option>
95+
<option>Anne King</option>
96+
<option>Laura Peacock</option>
97+
<option>Robert Fuller</option>
98+
<option>Janet White</option>
99+
<option>Nancy Leverling</option>
100+
<option>Robert Buchanan</option>
101+
<option>Margaret Buchanan</option>
102+
<option>Andrew Fuller</option>
103+
<option>Anne Davolio</option>
104+
<option>Andrew Suyama</option>
105+
<option>Nige Buchanan</option>
106+
<option>Laura Fuller</option>
107+
</select>
108+
</div>
109+
110+
</div>
111+
<script>
112+
$(document).ready(function() {
113+
$("#FeaturesSelect").kendoMultiSelect({
114+
headerTemplate: '<div style="padding:4px 8px"><input type="checkbox" id="selectAll"/>Select All</div>',
115+
autoClose : true,
116+
dataBound: function() {
117+
var items = this.ul.find("li");
118+
setTimeout(function() {
119+
checkInputs(items);
120+
});
121+
},
122+
change: function(e) {
123+
var totalItems = this.dataSource.data().length;
124+
var selected = this.value().length;
125+
if (totalItems != selected ) {
126+
$('#selectAll').prop('checked', false);
127+
}
128+
else{
129+
$('#selectAll').prop('checked', true);
130+
}
131+
}
132+
}).data("kendoMultiSelect");
133+
134+
$('#selectAll').change(function() {
135+
var multiSelect = $("#FeaturesSelect").data("kendoMultiSelect");
136+
if($(this).prop('checked')){
137+
selectAll();
138+
}
139+
else{
140+
multiSelect.value(null);
141+
$("#FeaturesSelect_listbox > li > input").prop("checked",false);
142+
}
143+
});
144+
145+
});
146+
147+
function selectAll() {
148+
var multiselect = $("#FeaturesSelect").data("kendoMultiSelect");
149+
var selectedValues = [];
150+
for (var i = 0; i < multiselect.dataSource.data().length; i++) {
151+
var item = multiselect.dataSource.data()[i];
152+
selectedValues.push(item.value);
153+
}
154+
155+
$("#FeaturesSelect_listbox > li > input").prop("checked", true);
156+
multiselect.value(selectedValues);
157+
multiselect.close();
158+
}
159+
</script>
160+
```
161+
162+
This code snippet demonstrates how to integrate a "Select All" option using the `headerTemplate` property of the MultiSelect component. The `tagMode` property is configurable to display a single tag with the count of selected items or individual tags for each selection.
163+
164+
## See Also
165+
166+
- [MultiSelect HeaderTemplate Configuration](https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect/configuration/headertemplate)
167+
- [MultiSelect TagMode Configuration](https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect/configuration/tagmode)
168+
- [Kendo UI MultiSelect for jQuery Templates (Demo)](https://demos.telerik.com/kendo-ui/multiselect/template)
169+
- [Kendo UI MultiSelect for jQuery API](https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect)

‎src/kendo.pager.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ var __meta__ = {
2626
LAST_CONST = "caret-alt-to-right",
2727
PREV_CONST = "caret-alt-left",
2828
NEXT_CONST = "caret-alt-right",
29+
REFRESH = "arrow-rotate-cw",
2930
FOCUSABLE = ":kendoFocusable:not([tabindex='-1'])",
3031
CHANGE = "change",
3132
NS = ".kendoPager",
@@ -243,15 +244,15 @@ var __meta__ = {
243244
if (options.refresh) {
244245
if (!that.element.find(".k-pager-refresh").length) {
245246
that.element.append('<button role="button" href="#" class="k-pager-refresh k-button ' + buttonSize + ' k-button-flat k-button-flat-base k-icon-button" title="' + options.messages.refresh +
246-
'" aria-label="' + options.messages.refresh + '">' + kendo.ui.icon("arrow-rotate-cw") + '</button>');
247+
'" aria-label="' + options.messages.refresh + '">' + kendo.ui.icon($('<span class="k-button-icon"></span>'),REFRESH) + '</button>');
247248
}
248249

249250
that.element.on(CLICK + NS, ".k-pager-refresh", that._refreshClick.bind(that));
250251
}
251252

252253
if (options.info) {
253254
if (!that.element.find(".k-pager-info").length) {
254-
that.element.append('<span class="k-pager-info k-label" />');
255+
that.element.append('<span class="k-pager-info" />');
255256
}
256257
}
257258

0 commit comments

Comments
 (0)