Skip to content

Commit 5d0d582

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 19d84fb commit 5d0d582

File tree

3 files changed

+444
-0
lines changed

3 files changed

+444
-0
lines changed

‎docs/knowledge-base/applying-k-selected-class-checkbox-dropdown-tree.md‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
---
2+
title: Applying k-selected Class to Checked Items in Kendo UI for jQuery DropDownTree
3+
description: Learn how to ensure consistent UI behavior by applying the k-selected class to items when checkboxes are checked in Kendo UI for jQuery DropDownTree.
4+
type: how-to
5+
page_title: Ensuring UI Consistency with k-selected Class in Kendo UI for jQuery DropDownTree
6+
slug: applying-k-selected-class-checkbox-dropdown-tree
7+
tags: kendo ui for jquery, dropdown tree, checkbox, ui consistency, k-selected class
8+
res_type: kb
9+
ticketid: 1689706
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Kendo UI for jQuery DropDownTree</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>2025.2.250</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
29+
When using the [Kendo UI for jQuery DropDownTree](https://www.telerik.com/kendo-jquery-ui/documentation/controls/dropdowntree/overview), enabling checkboxes may cause visual inconsistencies. Specifically, when a checkbox is checked, the `aria-checked` attribute updates correctly, but the `.k-selected` class does not apply to the corresponding item. Consequently, the item does not visually appear as selected, even though its checkbox is checked.
30+
31+
This knowledge base article also answers the following questions:
32+
- How to make items visually selected when checkboxes are checked in Kendo UI for jQuery DropDownTree?
33+
34+
## Solution
35+
36+
To ensure that the `.k-selected` class is applied to items when their checkboxes are checked, you can manually add or remove the class based on the checkbox state.
37+
38+
### Steps:
39+
40+
1. Attach a [`change`](/api/javascript/ui/dropdowntree/events/change) event listener to the checkboxes within the DropDownTree.
41+
2. Use the event to determine the state of the checkbox (`checked` or `unchecked`).
42+
3. Apply or remove the `.k-selected` class to the corresponding item based on the checkbox's state.
43+
44+
### JavaScript Example
45+
46+
```javascript
47+
$(".k-treeview").on("change", ".k-checkbox", function () {
48+
var item = $(this)
49+
.closest(".k-treeview-item")
50+
.find(".k-treeview-leaf");
51+
if ($(this).is(":checked")) {
52+
item.addClass("k-selected"); // Add the class for visual selection
53+
} else {
54+
item.removeClass("k-selected"); // Remove the class when unchecked
55+
}
56+
});
57+
```
58+
59+
This script ensures that when a checkbox is checked, the corresponding item visually appears as selected by applying the `.k-selected` class.
60+
61+
### Example
62+
63+
```dojo
64+
<label for="dropdowntree">Select one or more items</label>
65+
<input id="dropdowntree" />
66+
67+
<script>
68+
$(document).ready(function () {
69+
70+
$("#dropdowntree").kendoDropDownTree({
71+
placeholder: "Select ...",
72+
checkboxes: true,
73+
checkAll: true,
74+
autoClose: false,
75+
dataSource: [
76+
{
77+
text: "Furniture",
78+
expanded: true,
79+
items: [
80+
{ text: "Tables & Chairs" },
81+
{ text: "Sofas" },
82+
{ text: "Occasional Furniture" },
83+
],
84+
},
85+
{
86+
text: "Decor",
87+
items: [
88+
{ text: "Bed Linen" },
89+
{ text: "Curtains & Blinds" },
90+
{ text: "Carpets" },
91+
],
92+
},
93+
],
94+
});
95+
96+
97+
$(".k-treeview").on("change", ".k-checkbox", function () {
98+
var item = $(this)
99+
.closest(".k-treeview-item")
100+
.find(".k-treeview-leaf");
101+
if ($(this).is(":checked")) {
102+
item.addClass("k-selected");
103+
} else {
104+
item.removeClass("k-selected");
105+
}
106+
});
107+
});
108+
</script>
109+
110+
```
111+
112+
## See Also
113+
114+
- [Kendo UI for jQuery DropDownTree Overview](https://www.telerik.com/kendo-jquery-ui/documentation/controls/dropdowntree/overview)
115+
- [Kendo UI for jQuery DropDownTree API](/api/javascript/ui/dropdowntree)

‎docs/knowledge-base/hide-selected-items-multiselect.md‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
---
2+
title: Hiding Selected Items in MultiSelect Component
3+
description: Learn how to hide selected items in the dropdown list of the MultiSelect component.
4+
type: how-to
5+
page_title: Hide Selected Items in MultiSelect Dropdown
6+
slug: hide-selected-items-multiselect
7+
tags: multiselect,kendo-ui,open-event,filter,selected-items
8+
res_type: kb
9+
ticketid: 1686703
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>MultiSelect for Progress® Kendo UI®</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>2025.2.520</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
29+
I want to hide the selected items from the dropdown list in the MultiSelect component. Currently, the selected items are highlighted, but I need them to be excluded from the list instead.
30+
31+
This knowledge base article also answers the following questions:
32+
- How to filter out selected items in Kendo UI MultiSelect?
33+
- How to remove selected items dynamically in MultiSelect dropdown?
34+
- How to use the open event to filter items in MultiSelect?
35+
36+
## Solution
37+
38+
To hide selected items from the dropdown list in the [MultiSelect](/controls/multiselect/overview) component, use the [`open`](https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/ui/multiselect/events/open) event to dynamically filter the dropdown list each time it is shown. The following code demonstrates this approach:
39+
40+
```javascript
41+
open: function(e) {
42+
var multiselect = e.sender;
43+
var selectedValues = multiselect.value();
44+
var dataSource = multiselect.dataSource;
45+
46+
// Show all items first
47+
dataSource.filter(null);
48+
49+
// Then filter out selected items
50+
dataSource.filter({
51+
logic: "and",
52+
filters: selectedValues.map(function(value) {
53+
return {
54+
field: "value",
55+
operator: "neq",
56+
value: value
57+
};
58+
})
59+
});
60+
}
61+
```
62+
63+
### Explanation
64+
1. Attach the `open` event to the MultiSelect component.
65+
2. Retrieve the selected values using the `value()` method.
66+
3. Reset the filter by setting it to `null` to ensure all items are initially visible.
67+
4. Apply a filter to exclude the selected items. This is achieved using the `filter` method with a condition that removes items matching the selected values.
68+
69+
### Example
70+
A full demonstration can be found in the following Dojo example.
71+
72+
```dojo
73+
<select id="multiSelect" multiple="multiple">
74+
</select>
75+
<script>
76+
$("#multiSelect").kendoMultiSelect({
77+
dataTextField: "text",
78+
dataValueField: "value",
79+
dataSource: [
80+
{ text: "Item 1", value: 1 },
81+
{ text: "Item 2", value: 2 },
82+
{ text: "Item 3", value: 3 },
83+
{ text: "Item 4", value: 4 }
84+
],
85+
value: [2], // Preselected item
86+
open: function(e) {
87+
var multiselect = e.sender;
88+
var selectedValues = multiselect.value();
89+
var dataSource = multiselect.dataSource;
90+
91+
// Show all items first
92+
dataSource.filter(null);
93+
94+
// Then filter out selected items
95+
dataSource.filter({
96+
logic: "and",
97+
filters: selectedValues.map(function(value) {
98+
return {
99+
field: "value",
100+
operator: "neq",
101+
value: value
102+
};
103+
})
104+
});
105+
}
106+
});
107+
</script>
108+
```
109+
110+
## See Also
111+
112+
- [MultiSelect Overview Documentation](/controls/multiselect/overview)
113+
- [Open Event API Reference](/api/javascript/ui/multiselect/events/open)
114+
- [Filtering in Kendo UI DataSource](/api/javascript/data/datasource/methods/filter)

0 commit comments

Comments
 (0)