Multi Select Dropdown

[Rajesh]

Hi Team,

We are using Kendo Angular "Multi Select".

When we select more items in the "Multi Select" Drop Down the multi select starts expanding vertically which moves the whole UI to the bottom. 

Is there any way (or) work around to add the items in the same row without changing the height of the multi select (see the attached image)

Thanks,

Rajesh

[Dimiter Topalov]

Hi Rajesh,

The desired behavior is not supported out-of-the-box, but you can address the observed default behavior and rendering by either utilizing the Summary Tag mode:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/summary-tag-mode/

https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/summary-tag-mode/#toc-avoiding-line-breaks-after-a-number-of-selections

... or via overwriting the built-in CSS that is responsible for the styling of the tags container, e.g.:

https://stackblitz.com/edit/angular-xcgaum?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Wendy]

Hi! 

I have a similar issue to solve. 

I want to show all the elements selected in the component as long as its width allows me to show them in a single line. If not, I want to show all those elements that do not fit in a SummaryTag. Is this posible? How can I calculate the specific number of tags that I can show depending of the width so it's responsible for all different screen sizes, so I can use the kendoMultiSelectSummaryTag property or with the tagMapper callback function.

Thanks in advance!

[Dimiter Topalov]

Hi Wendy,

The tagMapper callback, demonstrated in the previously linked documentation section also allows displaying tags in both the regular and summary tag modes. The items to be displayed as a summary tag need to be wrapped in another array:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/summary-tag-mode/#toc-rendering-of-tags

Additional custom logic determining how many tags can fit the available space will need to be applied before returning the desired structure from the tagMapper callback, for example:

https://stackblitz.com/edit/angular-y2knyh-dcdd3r?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik