Use MultiSelect as a TagBox

1 Answer 191 Views
Chip MultiSelect TextBox
Alessandro
Top achievements
Rank 1
Iron
Alessandro asked on 15 Jun 2021, 09:22 AM

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!

1 Answer, 1 is accepted

Sort by
0
Yanmario
Telerik team
answered on 18 Jun 2021, 08:34 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Alessandro
Top achievements
Rank 1
Iron
commented on 18 Jun 2021, 12:30 PM

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
Telerik team
commented on 23 Jun 2021, 07:06 AM

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

Tags
Chip MultiSelect TextBox
Asked by
Alessandro
Top achievements
Rank 1
Iron
Answers by
Yanmario
Telerik team
Share this question
or