Use MultiSelect as a TagBox

[Alessandro]

Hi, I need the MultiSelect control to accept custom input while keeping its popup closed (like an input TagBox) as I don't need to use its DataSource. Also, can I input its values from an external dialog? Documentation says "All selected values which are not present in the source are ignored." but I don't want to have a DataSource.

 

Thanks!

[Yanmario]

Hi Alessandro,

This requirement could be achieved with some custom CSS as the MultiSelect component doesn't support such a functionality out-of-the-box.

First, the MultiSelect would need to work with custom values demonstrated in our documentation:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/custom-values/

The component relies on the popup for the item to be added. What can be done in this case is to hide the popup outside of the user view with some CSS:

.k-popup.k-list-container.k-reset{
        position: absolute;
         left: -1000px;
          top: 0;
    }

StackBlitz example of the mentioned implementation:

https://stackblitz.com/edit/multiselect-hide-popup?file=app/app.component.ts

I hope this helps.

Regards,
Yanmario Menev
Progress Telerik

[Alessandro]

How to apply this workaround on a single MultiSelect? I have many on the page and don't want to hide the popup for all...

[Yanmario]

Hi Alessandro,

This can be avoided by setting the popupSetthings > popupClass on the specific MultiSelect component. This allows the developer to target and style a specific popup without changing the styles of the other popups that are used on the page.

StackBlitz example:

https://stackblitz.com/edit/multiselect-hide-popup-1mwcpg?file=app/app.component.ts

I hope this helps.

Regards,
Yanmario Menev
Progress Telerik