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

Single-Row columns on resize

8 Answers 63 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Robin
Top achievements
Rank 1
Robin asked on 31 Jul 2012, 07:23 AM
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

8 Answers, 1 is accepted

Sort by
0
Galin
Telerik team
answered on 01 Aug 2012, 02:36 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Robin
Top achievements
Rank 1
answered on 02 Aug 2012, 08:46 AM
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
0
Galin
Telerik team
answered on 02 Aug 2012, 08:53 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Robin
Top achievements
Rank 1
answered on 02 Aug 2012, 09:03 AM
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
0
Galin
Telerik team
answered on 07 Aug 2012, 12:41 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Robin
Top achievements
Rank 1
answered on 07 Aug 2012, 01:42 PM
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
0
Galin
Telerik team
answered on 10 Aug 2012, 09:30 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Mahesh
Top achievements
Rank 1
answered on 21 Aug 2012, 05:26 AM
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 
Tags
Grid
Asked by
Robin
Top achievements
Rank 1
Answers by
Galin
Telerik team
Robin
Top achievements
Rank 1
Mahesh
Top achievements
Rank 1
Share this question
or