This is a migrated thread and some comments may be shown as answers.

Multi Select Dropdown

3 Answers 35 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Rajesh
Top achievements
Rank 1
Rajesh asked on 25 Jun 2019, 10:09 AM

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

3 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 27 Jun 2019, 10:44 AM
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
Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Wendy
Top achievements
Rank 1
answered on 26 Feb 2021, 05:22 AM

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!

0
Dimiter Topalov
Telerik team
answered on 01 Mar 2021, 10:31 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
MultiSelect
Asked by
Rajesh
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Wendy
Top achievements
Rank 1
Share this question
or