How to show text-overflowed items in Comobox with virtualization

[Jie]

Hi,

When a combobox has virtualization enabled. If an item's text is too long, instead of wrapping the line, it is now showing ellipsis. I am guessing it wants to keep a fixed height for every item for virtualization purpose. Is there a way to show the full text if its overflowed? For example, show a tooltip when mouse over the item?

 

Thanks,

Jie

[Konstantin Dikov]

Hello Jie,

You can add custom item rendering and set a "title" attribute to a DIV or SPAN element, so that it can display the text that you want. You can also wrap the ComboBox in a Tooltip component, so that it will show stylized tooltip. Following is an example demonstrating this approach:

• https://stackblitz.com/edit/react-7ahuvc-wemp6u?file=app%2Fmain.jsx

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

[Jie]

Thanks for the example. I am curious if there is any other ways to show the full text without using tooltips.

[Konstantin Dikov]

Hello,

Displaying the tooltips might be the best option for this particular requirement, since rendering items with different height might cause problems with the virtualization. Nevertheless, I have tested rendering the text on multiple lines and the virtualization seems to work as expected:

• https://stackblitz.com/edit/react-ee2mjs?file=app%2Fmain.jsx

Here is the example with the virtual scrolling and the custom rendering of the items:

• https://stackblitz.com/edit/react-ee2mjs-zmzkh3?file=app%2Fmain.jsx

If you have further questions, please feel free to get back to us.