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

ItemStyle-ForeColor

5 Answers 526 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kjell
Top achievements
Rank 1
Iron
Kjell asked on 26 Jan 2015, 04:31 PM
I have a grid with telerik:GridBoundColumn where I try to change the text color to red.
If the text data is unformatted it works, but not if the text is HTML Code / is a url.
Have tried with ItemStyle-ForeColor="Red" and:

Protected Sub RadGrid1_ItemDataBound(sender As Object, e As GridItemEventArgs)
    If TypeOf e.Item Is GridDataItem Then
        Dim dataItem As GridDataItem = TryCast(e.Item, GridDataItem)
        Dim myCell As TableCell = dataItem("FormularUrl")
        myCell.ForeColor = Color.Red
    End If
End Sub

5 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 29 Jan 2015, 10:15 AM
Hello Kjell,

If the content of the cell is not plain text, you may have to set a CSS class to the TableCell element and style the content of the cell with CSS:
item("FormularUrl").CssClass = "urlStyle"

And with the CSS you can apply your own styles:
<style type="text/css">
    .urlStyle {
        color: #ffd800;
        ....
    }
 
        .urlStyle a {
            color: #ffd800;
            ....
        }
</style>

Hope this helps.
 

Regards,
Konstantin Dikov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Kjell
Top achievements
Rank 1
Iron
answered on 29 Jan 2015, 11:26 AM
Sorry, not work.....
If I understand you correctly:

<telerik:GridBoundColumn DataField="FormularUrl" HeaderStyle-Width="86px" HeaderText="Fyll i direkt!" ItemStyle-CssClass="urlStyle" />


And in the head:
<style type="text/css">
    .urlStyle {
        color: red;
    }
 
        .urlStyle a {
            color: red;
        }
</style>


0
Konstantin Dikov
Telerik team
answered on 03 Feb 2015, 06:59 AM
Hi Kjell,

The same code is working as expected on my end and it is changing the color of text in that column:
<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView AutoGenerateColumns="false">
        <Columns>
            <telerik:GridBoundColumn DataField="FormularUrl" HeaderStyle-Width="86px" HeaderText="Fyll i direkt!" ItemStyle-CssClass="urlStyle" />
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

And the CSS is the same as in the previous example.

Can you please provide a very basic example with dummy data that replicates the problem and also, elaborate on the version of our controls that you are currently using. Thus we will be able to test it locally and isolate the root of the problem.


Regards,
Konstantin Dikov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Kjell
Top achievements
Rank 1
Iron
answered on 03 Feb 2015, 10:11 AM
version: 2014.3.1209.45

default.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
 
<!DOCTYPE HTML>
<html lang="sv">
<head runat="server">
    <meta charset="iso-8859-1">
    <title>Blankettbanken</title>
    <style type="text/css">
        .urlStyle {
            color: red;
        }
 
            .urlStyle a {
                color: green;
            }
    </style>
</head>
 
<body>
 
 
    <form id="form1" runat="server">
 
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
 
        <div>
 
            <telerik:RadGrid ID="RadGrid1" GridLines="None" OnNeedDataSource="RadGrid1_NeedDataSource" runat="server">
                <MasterTableView AutoGenerateColumns="False">
                    <Columns>
                        <telerik:GridBoundColumn DataField="ID" HeaderText="ID" ItemStyle-ForeColor="Blue" />
                        <telerik:GridBoundColumn DataField="Test" HeaderText="Test" ItemStyle-CssClass="urlStyle" />
                        <telerik:GridBoundColumn DataField="MyUrl" HeaderText="MyUrl" ItemStyle-CssClass="urlStyle" />
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
 
        </div>
    </form>
</body>
</html>



Default.aspx.vb
Imports Telerik.Web.UI
Imports System.Data
 
Partial Class _Default
    Inherits System.Web.UI.Page
 
 
    Protected Sub RadGrid1_NeedDataSource(sender As Object, e As GridNeedDataSourceEventArgs)
 
        Dim table As New DataTable()
        table.Columns.Add("ID", GetType(Integer))
        table.Columns.Add("Test", GetType(String))
        table.Columns.Add("MyUrl", GetType(String))
        For i As Integer = 0 To 4
            table.Rows.Add(i, "Test", "<a href='http://www.telerik.com/forums/aspnet-ajax' target='_top'>Till formulär</a>")
        Next
 
        TryCast(sender, RadGrid).DataSource = table
 
    End Sub
 
End Class





0
Konstantin Dikov
Telerik team
answered on 03 Feb 2015, 12:49 PM
Hi Kjell,

Thank you for providing an example that replicates the issue.

Actually, what is preventing the anchor element to be styled with the custom CSS that we are using is the fact that the styles that comes from the SKIN are with higher priority and are overriding the custom styles. You can handle this by one of the following approaches:
1) Adding "!important" at the end of the property:
.urlStyle a {
    color: green!important;
}

2) Increasing the specificity of the selector:
div.RadGrid .urlStyle a {
    color: green;
}

Hope this fixes the issue on your end too.


Best Regards,
Konstantin Dikov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Kjell
Top achievements
Rank 1
Iron
Answers by
Konstantin Dikov
Telerik team
Kjell
Top achievements
Rank 1
Iron
Share this question
or