[Solved] Tooltip for overflow text in grid

[Howard]

Hi,

Need help for overflow text in grid.

How can i fixed the row of grid for 3 lines text for each row

 when the word in row is longer than  3 lines i want to show as "... " (three dots)

But when mouse is pointed on the line "..." needs to show that hidden content.

[Dimo]

Hello Niroj,

Since the Grid does not provide any of the described functionality out-of-the-box, you will need to implement it manually and add an appropriate Grid column template.

For easier start, you can do this outside the Grid first.

1. Use two nested <div>s. The outer should have a fixed height style (or max-height) and overflow:hidden applied.

2. When the page loads, you can check whether the inner <div> is higher than the outer <div>, which means you need the dots (ellipsis).

3. The ellipsis can be an absolutely positioned element with dots or an image inside. Attach a mouseover handler to it, and display the tooltip in this handler. If the ellipsis is absolutely positioned, then the outer <div> should be relatively positioned.

4. When using this implementation in the Grid, you will attach the mouseover handlers in the Grid's OnLoad event if using server binding, and the OnDataBound event if using client binding.

The Grid template demos are available at:

http://demos.telerik.com/aspnet-mvc/grid/templatesserverside

http://demos.telerik.com/aspnet-mvc/grid/templatesclientside

Best wishes,
Dimo
the Telerik team

[Howard]

Hi Dimo,

Is there any sample example for this property?

Thank you

[Dimo]

Hello Niroj,

I am afraid I do not have an example for the described functionality, as it is not related to the Grid component. Let me know if anything specific is unclear in my previous reply.

Regards,
Dimo
the Telerik team