Single-Row columns on resize

[Robin]

Hello,

I would like the content of my RadGrid to occupy a single row at all times, even changing the text from (for example) "ABCDE" to "ABC..." when the column gets to small due to a resize. I would also like the full text to be shown as a tooltip if the user moves the mouse over the column. Is there an easy way to achieve this functionality with the RadGrid?

Thanks in advance,
Robin

[Galin]

Hello Robin,

This can be achieved with the following CSS rule:

.ellipses
{
    white-space:nowrap;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis; /* fix for old opera version */
    overflow:hidden;
}

Please note that some browsers accept the property text-overflow:ellipsis only for block elements, like div. So you have to set it like in this sample markup:

<telerik:GridTemplateColumn HeaderText="Item">
    <ItemTemplate>
        <div class="ellipses" title="<%#DataBinder.Eval(Container, "DataItem.Item")%>"><%#DataBinder.Eval(Container, "DataItem.Item")%></div>
    </ItemTemplate>
</telerik:GridTemplateColumn>

I hope this helps.

All the best,
Galin
the Telerik team

[Robin]

Hello Galin,

The .css you suggested seems to solve my problem of having multiple rows for some entries, but how do I get the whole text of the specific row displayed as a tool tip?

Thanks in advance,
Robin

[Galin]

Hi Robin,

I am glad my solution helped you. Also, the whole text will be displayed with the attribute title as is showed in the example.

Kind regards,
Galin
the Telerik team

[Robin]

Hi Galin,

I am sorry, my previous question has been a little bit misleading, and I should better rephrase it.
It would like the "content" rows of the RadGrid to have a tool tip with their whole substance as soon as the column gets to small to show it, not the text of the actual header of the Grid.
As an example, in some of your demos the column "Company Name" has the entry "Antonio Moreno Taquería", and I would like that to be displayed as "Antonie Mo..." when the Column gets to small to show the whole content, while also displaying a tool tip reading "Antonio Moreno Taquería" when moving the mouse over the specific row.

Kind regards,
Robin

[Galin]

Hi Robin,

The provided solution has the described behavior. The whole text is showed on mouse over. For reference I am sending this video and a sample project.

I hope this helps.

All the best,
Galin
the Telerik team

[Robin]

Hi Galin,

Thank you very much, your solution was exactly what I was looking for.
I only have one follow-up question left: Is it possible to show the tool tip containing the text only if it really has to be seen (at the moment it is also shown when the user is capable of reading the whole text without the tool tip)?

Again, thank you very much,
Robin

[Galin]

Hello Robin,

To hide the tooltip text you should clear the value of the attribute title. You can wrap the text in <span /> element and compare its width with the <div /> element.

Example for the JS

$telerik.$(".ellipses span").hover(function(){
    var divWidth = this.parentNode.offsetWidth,
     spanWidth = this.offsetWidth;

    if(divWidth > spanWidth) {
        this.title = "";
    }
}).mouseout(function(){
    this.title = this.innerHTML;
})

And the markup

<telerik:GridTemplateColumn HeaderText="Item" HeaderStyle-Width="270px">
    <ItemTemplate>
        <div class="ellipses">
            <span title="<%#DataBinder.Eval(Container, "DataItem.Item")%>"><%#DataBinder.Eval(Container, "DataItem.Item")%></span>
        </div>
    </ItemTemplate>
</telerik:GridTemplateColumn>

Additionally, you might need to add a ScriptReference pointing to jQuery.js.

I hope this helps.

Kind regards,
Galin
the Telerik team

[Mahesh]

Hi  Galin
,

I am facing problem that.....
On resizing of one column (of Telerik mvc grid )  other columns are also resizing  ....How to avoid this.... or else pls tell me how to get width of the column
in the client events of grid or in javascript........
Pls inform me....I am waiting for your reply  

Thanks & Regards,

Mahesh