Multiselect - Removing Selected Data Items from dropdown list

[Joey]

Is there anyway to remove the items that have been selected from the dropdown list already?  For instance, the multiselect functionality changed somewhere between 2014 - 2016.  The list used to only show items that were not already selected.  Now it shows all items and it shows items that have already been selected by highlighting them.  Is there an option to make it hide the selected items from list?  What was the reasoning behind changing the functionality?

[Nencho]

Hello Joey,

In order to achieve the desired behavior you can simply apply the following css style rule, and add the class to the MultiSelect widget:

  .hide-selected > li.k-state-selected {
            display: none;
        }

...

<script>
    $(document).ready(function () {
        var multiselect= $("#required").data("kendoMultiSelect");
        multiselect.ul.addClass('hide-selected');
</script>

Regards,
Nencho
Telerik by Progress

[Chris]

Is there a version of this solution that works with virtualization? I've found that selected items show as blank entries with virtualization enabled due to its fixed item height requirement.

[Nencho]

Hello Chris,

I have just replied to the other ticket, where you submitted a similar question, however, I am afraid that hiding items or removing them from the data source is not applicable in virtualization scenario.

On the one hand, visually changing the appearance, like demonstrated in this forum post, is not applicable due to the reason that the virtualization relies on the items height to acquire the different portion of items. On the other hand, since the virtualization is a quite complex implementation - changing dynamically the data source is also not recommended as described in the following limitation section of the documentation article:

http://docs.telerik.com/kendo-ui/controls/editors/combobox/virtualization#known-limitations 

Regards,
Nencho
Progress Telerik