[Solved] Styling issue in GridTemplateColumn

[anna]

I have following grid in my page.

<telerik:RadGrid ID="RadGrid1" ShowFooter="True"

OnSortCommand="RadGrid1_SortCommand" runat="server" AllowFilteringByColumn="True" AllowSorting="True"

DataSourceID="SqlDataSource1" GridLines="None" Width="1000px">

<MasterTableView AutoGenerateColumns="False" DataKeyNames="@ID" DataSourceID="SqlDataSource1"

GridLines="Horizontal">

<RowIndicatorColumn Visible="False">

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<ExpandCollapseColumn Resizable="False" Visible="False">

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<Columns>

<telerik:GridTemplateColumn HeaderText="Bill of Lading" DataField="BOL" SortExpression="BOL" UniqueName="bolcolumn">

<ItemTemplate>

<asp:HyperLink CssClass="links" runat="server" ID="BOLLnk"

Text='<%# DataBinder.Eval(Container, "DataItem.BOL") %>'></asp:HyperLink>

</ItemTemplate>

<HeaderStyle Width="105px" />

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="BOL" HeaderText="Bill of Lading" SortExpression="BOL"

UniqueName="BOL" Visible="False">

<ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"

Font-Underline="False" Wrap="True" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CARRIER" HeaderText="Carrier" SortExpression="CARRIER"

UniqueName="CARRIER">

<HeaderStyle Width="105px" />

</telerik:GridBoundColumn>

</Columns><EditFormSettings>

<PopUpSettings ScrollBars="None" />

</EditFormSettings>

<AlternatingItemStyle BackColor="#99CCFF"

Wrap="True" />

</MasterTableView>

<ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True">

<Scrolling AllowScroll="True" UseStaticHeaders="True" />

</ClientSettings>

</telerik:RadGrid>

I have CssClass="links"  in my hyperlink column but underline and color  part of it doesn't work at all. how do I underline my text in this col. I have also tried the following:

Private

Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs) Handles RadGrid1.ItemDataBound

Dim data As String

data = ""

Dim cdata As String

cdata = ""

Dim cname As String

If TypeOf e.Item Is GridDataItem Then

Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)

Dim CategoryIDLabel2 As HyperLink = DirectCast(item("bolColumn").FindControl("BOLLnk"), HyperLink)

CategoryIDLabel2.NavigateUrl =

"BOLDisplay.aspx?id=" & ddlWarehouse.SelectedValue + "*" & CategoryIDLabel2.Text

CategoryIDLabel2.CssClass="links"

End Sub

I have also tried

<telerik:GridTemplateColumn ItemStyle-CssClass="links"

my css:

.links

{

FONT-SIZE: 11px;

color: blue;

font-weight:bolder;

TEXT-DECORATION: underline;

}

[Princy]

Hi Anna,

 Try setting the NavigateUrl for the HyperLink as shown below.

ASPX:

<asp:HyperLink ID="HyperLink1" runat="server"  Text='<%# DataBinder.Eval(Container, "DataItem.BOL") %>'  NavigateUrl="~/Default.aspx" ></asp:HyperLink>

Princy.

[Dimo]

Hi Anna,

When you want to apply a custom CSS style, you have to always make sure that the CSS rule you are using has a high enough specificity to override the RadGrid skin and other web applications styles.

The concept of specificity determines which CSS style will be applied when a conflict occurs (for example you have 2 CSS rules - one says "underline links" and the other says "do not underline links")

For more information on CSS specificity, please refer to:

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/


So, the first thing you can try in your case is increasing the specificity of your CSS rule by adding one more CSS class to the selector.


If you set the CSS class directly to the links, please try:

.RadGrid_Skin  .links

{

     ...............

}

If you set the CSS class to grid cells, please try:

.RadGrid_Skin  .links  a

{

     ...............

}

Let us know how it goes.


All the best,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center