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

[Solved] Hyperlink Column IE8 Link Decoration

4 Answers 104 Views

Grid

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

John asked on 04 Oct 2010, 08:37 AM

grid2.jpg

grid1.jpg

I have a little visual problem. In IE8 a Hyperlink Column that is no AlternateItem and is not Hovered
shows the Link Decoration (Underline) for the Hole Link text when only parts of the Text ist visible,
when hovered with Mouse the decoration gets fit to the columnwidth (see pictures)

4 Answers, 1 is accepted

answered on 06 Oct 2010, 02:51 PM

Hi John,

This looks like a browser bug, but nevertheless, I cannot reproduce it locally. Below is my test page. Can you modify it, so that the problem is exhibited?

(I also tried adding a GridImageColumn next to the hyperlink column, with no success)

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Data" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

DataTable dt = new DataTable();

DataRow dr;

int colsNum = 4;

int rowsNum = 2;

string colName = "Column";

for (int j = 1; j <= colsNum; j++)

{

dt.Columns.Add(String.Format("{0}{1}", colName, j));

}

for (int i = 1; i <= rowsNum; i++)

{

dr = dt.NewRow();

for (int k = 1; k <= colsNum; k++)

{

dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);

}

dt.Rows.Add(dr);

}

(sender as RadGrid).DataSource = dt;

}

protected void Page_Load(object sender, EventArgs e)

{

if (IsPostBack)

{

Unit u = Unit.Parse("137.5px");

}

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls</title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid

ID="RadGrid1"

runat="server"

Width="800px"

OnNeedDataSource="RadGrid_NeedDataSource">

<ClientSettings EnableRowHoverStyle="true">

<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="" />

<Selecting AllowRowSelect="true" />

</ClientSettings>

<MasterTableView TableLayout="Fixed">

<Columns>

<telerik:GridHyperLinkColumn HeaderText="header" DataNavigateUrlFields="Column1" DataNavigateUrlFormatString="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

DataTextField="Column2" DataTextFormatString="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

</form>

</body>

</html>

Greetings,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 06 Oct 2010, 03:57 PM

With you provided code i also does not have this effect. So i tried to fill your code with parts of mine and voila... the effect is visible.

So here is my modified code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<%@ Import Namespace="System.Data" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

DataTable dt = new DataTable();

DataRow dr;

int colsNum = 17;

int rowsNum = 7;

string colName = "Column";

for (int j = 1; j <= colsNum; j++)

{

dt.Columns.Add(String.Format("{0}{1}", colName, j));

}

for (int i = 1; i <= rowsNum; i++)

{

dr = dt.NewRow();

for (int k = 1; k <= colsNum; k++)

{

if (k == 9)

{

dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2} aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa", colName, k, i);

}

else

{

dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);

}

dt.Rows.Add(dr);

}

(sender as RadGrid).DataSource = dt;

}

protected void Page_Load(object sender, EventArgs e)

{

if (IsPostBack)

{

Unit u = Unit.Parse("137.5px");

}

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls</title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid

ID="RadGrid1"

runat="server"

AllowPaging="True" AllowSorting="True"

AutoGenerateColumns="False" PageSize="5" Culture="de-CH" GroupingEnabled="false" AllowFilteringByColumn="true" ClientSettings-AllowColumnHide="false"

MasterTableView-AllowMultiColumnSorting="true" ShowGroupPanel="false" EnableLinqExpressions="false"

OnNeedDataSource="RadGrid_NeedDataSource">

<ClientSettings AllowKeyboardNavigation="True" EnablePostBackOnRowClick="True"

EnableRowHoverStyle="True" Resizing-AllowColumnResize="True">

<Selecting AllowRowSelect="True" EnableDragToSelectRows="False" />

</ClientSettings>

<MasterTableView TableLayout="Fixed" RowIndicatorColumn-Visible="False" ItemStyle-VerticalAlign="Top" AlternatingItemStyle-VerticalAlign="Top" AllowFilteringByColumn="True" AllowMultiColumnSorting="True">

<Columns>

<telerik:GridEditCommandColumn ButtonType="ImageButton" Visible="False">

<HeaderStyle Width="25px" />

</telerik:GridEditCommandColumn>

<telerik:GridBoundColumn DataField="Column1" HeaderText="Column1" UniqueName="Column1" Visible="false" ReadOnly="True" AllowFiltering="False">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderText="Column2" SortExpression="Column2" DataField="Column2" ShowFilterIcon="False" AutoPostBackOnFilter="True" FilterControlWidth="100%" FilterControlToolTip='Nach "SrNr" filtern'>

<ItemTemplate>

<asp:Label ID="Column2Label" runat="server" text='<%# Eval("Column2") %>' />

<telerik:RadToolTip runat="server" ID="Column2Tooltip" ContentScrolling="Auto" Width="450px" Height="150px" Animation="Fade" EnableShadow="true" ShowEvent="OnMouseOver" TargetControlID="Column2Label" Text="" Position="MiddleRight" RelativeTo="Mouse" ShowDelay="250" HideEvent="LeaveTargetAndToolTip" HideDelay="250" AnimationDuration="250" AutoCloseDelay="0"></telerik:RadToolTip>

</ItemTemplate>

<HeaderStyle Width="75px" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Column3" SortExpression="Column3" DataField="Column3" ShowFilterIcon="False" AutoPostBackOnFilter="True" FilterControlWidth="100%" FilterControlToolTip='Nach "Abkürzung" filtern'>

<ItemTemplate>

<asp:Label ID="Column3Label" runat="server" text='<%# Eval("Column3") %>' />

<telerik:RadToolTip runat="server" ID="Column3Tooltip" ContentScrolling="Auto" Width="450px" Height="150px" Animation="Fade" EnableShadow="true" ShowEvent="OnMouseOver" TargetControlID="Column3Label" Text="" Position="MiddleRight" RelativeTo="Mouse" ShowDelay="250" HideEvent="LeaveTargetAndToolTip" HideDelay="250" AnimationDuration="250" AutoCloseDelay="0"></telerik:RadToolTip>

</ItemTemplate>

<HeaderStyle Width="75px" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Column4" SortExpression="Column4" DataField="Column4" ShowFilterIcon="False" AutoPostBackOnFilter="True" FilterControlWidth="100%" FilterControlToolTip='Nach "Abkürzung" filtern'>

<ItemTemplate>

<asp:Label ID="Column4Label" runat="server" text='<%# Eval("Column4") %>' />

<telerik:RadToolTip runat="server" ID="TitelTooltip" ContentScrolling="Auto" Width="450px" Height="150px" Animation="Fade" EnableShadow="true" ShowEvent="OnMouseOver" TargetControlID="Column4Label" Text="" Position="MiddleRight" RelativeTo="Mouse" ShowDelay="250" HideEvent="LeaveTargetAndToolTip" HideDelay="250" AnimationDuration="250" AutoCloseDelay="0"></telerik:RadToolTip>

</ItemTemplate>

<HeaderStyle Width="130px" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Column5" SortExpression="Column5" ShowFilterIcon="False" AutoPostBackOnFilter="True" DataField="Column5" FilterControlWidth="100%" FilterControlToolTip='Nach "Beschreibung" filtern'>

<ItemTemplate>

<asp:Label ID="Column5Label" runat="server"></asp:Label>

<telerik:RadToolTip runat="server" ID="Column5Tooltip" ContentScrolling="Auto" Width="600px" Height="350px" Animation="Fade" EnableShadow="true" ShowEvent="OnMouseOver" TargetControlID="Column5Label"

Text='<%# Eval("Column5") %>' Position="BottomCenter" RelativeTo="Mouse" ShowDelay="250" HideEvent="LeaveTargetAndToolTip" HideDelay="250" AnimationDuration="250" AutoCloseDelay="0"></

telerik:RadToolTip>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="Column6" HeaderText="Column6" UniqueName="Column6" Visible="false">

<HeaderStyle Width="50px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Column7" HeaderText="Column7" UniqueName="Column7" Visible="false">

<HeaderStyle Width="50px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Column8" HeaderText="Column8" UniqueName="Column8">

<HeaderStyle Width="55px" />

</telerik:GridBoundColumn>

<telerik:GridHyperLinkColumn DataNavigateUrlFields="Column9"

DataTextField="Column9" HeaderText="Link1"

UniqueName="Column9" AllowFiltering="False">

<HeaderStyle Width="115px" />

</telerik:GridHyperLinkColumn>

<telerik:GridHyperLinkColumn DataNavigateUrlFields="Column10"

DataTextField="Column10" HeaderText="Link2" UniqueName="Column10" AllowFiltering="False">

<HeaderStyle Width="115px" />

</telerik:GridHyperLinkColumn>

<telerik:GridHyperLinkColumn DataNavigateUrlFields="Column11"

DataTextField="Column11" HeaderText="Link3"

UniqueName="Column11" AllowFiltering="False">

<HeaderStyle Width="115px" />

</telerik:GridHyperLinkColumn>

<telerik:GridImageColumn HeaderText="Status" ImageHeight="" ImageWidth=""

UniqueName="bild" AllowFiltering="False">

<HeaderStyle Width="70px" />

</telerik:GridImageColumn>

<telerik:GridButtonColumn CommandName="Delete" Text="Delete"

UniqueName="Delete" ButtonType="ImageButton" Visible="False"

ConfirmDialogType="RadWindow"

ConfirmText="Soll der Datensatz wirklick gelöscht werden?"

ConfirmDialogHeight="100px" ConfirmDialogWidth="300px" ConfirmTitle="Frage">

<HeaderStyle Width="30px" />

</telerik:GridButtonColumn>

<telerik:GridBoundColumn DataField="Column12" HeaderText="Column12" UniqueName="Column12" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Column13" HeaderText="Column13" UniqueName="Column13" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Column14" HeaderText="Column14" UniqueName="Column14" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridDateTimeColumn DataField="Column15" HeaderText="Column15" UniqueName="Column15" Visible="false">

</telerik:GridDateTimeColumn>

<telerik:GridDateTimeColumn DataField="Column16" HeaderText="Column16" UniqueName="Column16" Visible="false">

</telerik:GridDateTimeColumn>

<telerik:GridBoundColumn DataField="Column17" HeaderText="Column17" UniqueName="Column17" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Column1" HeaderText="Column1" UniqueName="Column1" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Column2" HeaderText="Column2" UniqueName="Column2" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Column3" HeaderText="Column3" UniqueName="Column3" Visible="false">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</form>

</body>

</html>

answered on 06 Oct 2010, 04:22 PM

DataTextFormatStringHi John,

Thanks. I stripped your demo to a point in which the problem was exhibited if the image column had no ImageUrl specified, but everything looked OK when an image was set.

In addition, the problem is not observed, if I add the following CSS rule to the page:

.RadGrid a
{
zoom:1;
}

(Note that the ellipsis is lost in this case).

This is definitely a browser bug. You can any workaround, which suits your requirements - e.g. use shorter hyperlink text, which does not overflow the column - by setting DataTextFormatString

Greetings,
Dimo
the Telerik team