Unplanned
Last Updated: 18 Feb 2025 14:29 by Alistair
Alistair
Created on: 06 Feb 2025 11:35
Category: Kendo UI for jQuery
Type: Feature Request
3
Add single line mode to Multiselect

Hi, 

We have some multiselect controls which can have a large number of values, and selected values. This causes an issue where the height becomes unreasonably large compared to other controls. 

For a typical example of the issue, see here: Multiselect height issue | Kendo UI Dojo

As can also be seen in the provided example, setting max-height with an overflow isn't a viable solution as then it becomes very difficult to see what has been selected - the vertical scroll is much too quick (at least it is using my mouse which has discrete scroll values). Also, there are both dropdown buttons and scroll buttons which is ugly and confusing for end users.

Our suggestion to resolve this would be to add an option for a "single line mode" so that functionality is not broken for other clients. When using this mode, all the items will be kept in a line. In the event of an overflow, then you could either a) cut off the items with an ellipsis "..." or b) enable horizontal scrolling (ideally without a visible scrollbar). 

See this example in the DevExpress controls for an example of horizontal scrolling in "Single line mode".
JavaScript/jQuery Tag Box - Overview | jQuery/JS Example
You can see that when all the items are selected, the height is kept consistent. It is still reasonably easy to read as you can easily scroll along.
Something similar to this solution would be ideal for us.

2 comments
Alistair
Posted on: 18 Feb 2025 14:29

Hi Neli,

Thank you for your reply.

Unfortunately, the suggested workaround is not suitable for our customers.

Our customers typically need to be able to see what values they have selected at a glance. A single tag, or a count of the tags is not a viable solution as they'd need to click into the control to find the values (vs being able to quickly scroll along horizontally).

Furthermore, the lengths of the text values in the Multiselects are also highly variable so trying to dynamically calculate the expected width and set the mode is not really viable (and would require recalculation every time the control is rendered or resized). Though if Telerik provided a way to do that automatically for us (changing mode automatically based on overflowing the width) that could be a workaround.

Regards,

Alistair

ADMIN
Neli
Posted on: 13 Feb 2025 07:44

Hello Alistair,

Thank you for logging this feature request and for the detailed explanation on the expected result. I am changing the status of the issue to 'Unplanned'. We will monitor the request in the portal and depending on the popularity the issue gains by the community it will be considered for implementation in the future. 

In the meantime, I would suggest reviewing the single tagMode behavior of the MultiSelect.

https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect/configuration/tagmode 

The Knowledge Base article linked below demonstrates how the tagMode can be changed based on the count of the selected items:

- https://docs.telerik.com/kendo-ui/knowledge-base/change-multiselect-tagmode-programmatically

I hope this helps.

Regards,


Neli
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.