New to Kendo UI for jQuery? Start a free 30-day trial
Hiding Selected Items in MultiSelect Component
Environment
Product | MultiSelect for Progress® Kendo UI® |
Version | 2025.2.520 |
Description
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.
This knowledge base article also answers the following questions:
- How to filter out selected items in Kendo UI MultiSelect?
- How to remove selected items dynamically in MultiSelect dropdown?
- How to use the open event to filter items in MultiSelect?
Solution
To hide selected items from the dropdown list in the MultiSelect component, use the open
event to dynamically filter the dropdown list each time it is shown. The following code demonstrates this approach:
javascript
open: function(e) {
var multiselect = e.sender;
var selectedValues = multiselect.value();
var dataSource = multiselect.dataSource;
// Show all items first
dataSource.filter(null);
// Then filter out selected items
dataSource.filter({
logic: "and",
filters: selectedValues.map(function(value) {
return {
field: "value",
operator: "neq",
value: value
};
})
});
}
Explanation
- Attach the
open
event to the MultiSelect component. - Retrieve the selected values using the
value()
method. - Reset the filter by setting it to
null
to ensure all items are initially visible. - 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.
Example
A full demonstration can be found in the following Dojo example.
<select id="multiSelect" multiple="multiple">
</select>
<script>
$("#multiSelect").kendoMultiSelect({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Item 1", value: 1 },
{ text: "Item 2", value: 2 },
{ text: "Item 3", value: 3 },
{ text: "Item 4", value: 4 }
],
value: [2], // Preselected item
open: function(e) {
var multiselect = e.sender;
var selectedValues = multiselect.value();
var dataSource = multiselect.dataSource;
// Show all items first
dataSource.filter(null);
// Then filter out selected items
dataSource.filter({
logic: "and",
filters: selectedValues.map(function(value) {
return {
field: "value",
operator: "neq",
value: value
};
})
});
}
});
</script>