How to remove selected-row styling

[Ed]

Problem: you want to use one of the Telerik skins (e.g. Sunset) for styling but don't like the garish colouring used to show selected rows in a RadGrid.

Solution: you can "undo" the selected-row styling with these style-sheet commands:

.RadGrid_Sunset .rgRow td
{
border-color:#FFFFFF #FFFFFF #FFFFFF #CABAAB !important;
}

.RadGrid_Sunset .rgAltRow
{
background:none repeat scroll 0 0 #F1E9DC !important;
}

.RadGrid_Sunset .rgAltRow td
{
border-color:#F1E9DC #F1E9DC #F1E9DC #CABAAB !important;
}

.RadGrid_Sunset .rgRow
{
background: inherit !important;
}

.RadGrid_Sunset .rgRow td, .RadGrid_Sunset .rgAltRow td
{
border-left: solid 1px #CABAAB !important;
padding-left: 7px !important;
}

/* finally, need to put this one back in */

.RadGrid_Sunset .rgHeader:first-child, .RadGrid_Sunset th.rgResizeCol:first-child, .RadGrid_Sunset .rgFilterRow > td:first-child, .RadGrid_Sunset .rgRow > td:first-child, .RadGrid_Sunset .rgAltRow > td:first-child
{
border-left: 0 none !important;
padding-left: 8px !important;
}

This effectively counteracts the styles coming from the .rgSelectedRow class (and used by the skin) by re-inserting the normal (i.e., non-selected) styles in all circumstances ("!important").

Note that I haven't tried this for other skins; I am assuming it will be similar, however, although the border colours will obviously need to be changed.

[Dimo]

Hi Ed,

The following demo shows the CSS styles, which are required to "disable" (actually override) the selected styles for all embedded skins.

The code is a little overcomplicated, because the demo has been implemented for a more general scenario.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ 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 = 6;
        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 string CurrentSkin = "Windows7";

    protected void RadSkinManager1_SkinChanged(object sender, SkinChangedEventArgs e)
    {
        CurrentSkin = e.Skin;

        RadGrid1.Rebind();
        RadGrid2.Rebind();
    }

    protected Dictionary<string, string> RadGridStyles = new Dictionary<string, string>();

    protected void Page_Load(object sender, EventArgs e)
    {
        RadSkinManager1.Skin = CurrentSkin;

        InitRadGridStyles();
    }

    protected void InitRadGridStyles()
    {
        RadGridStyles.Add("Black", "div.GridNoSelBlack .rgRow{background:none transparent;color:#d7d7d7;}div.GridNoSelBlack .rgAltRow{background:#494949;color:#d7d7d7;}div.GridNoSelBlack .rgRow td{border-color:#4f4f4f;}div.GridNoSelBlack .rgAltRow td{border-color:#494949;}div.GridNoSelBlack .rgRow a,div.GridNoSelBlack .rgAltRow a{color:#d7d7d7;}");
        RadGridStyles.Add("Default", "div.GridNoSelDefault .rgRow{background:none transparent;color:#333;}div.GridNoSelDefault .rgAltRow{background:#f2f2f2;color:#333;}div.GridNoSelDefault .rgRow td{border-color:#fff;}div.GridNoSelDefault .rgAltRow td{border-color:#f2f2f2;}div.GridNoSelDefault .rgRow a,div.GridNoSelDefault .rgAltRow a{color:#333;}");
        RadGridStyles.Add("Forest", "div.GridNoSelForest .rgRow{background:none transparent;color:#2b2c20;}div.GridNoSelForest .rgAltRow{background:#c7d6a7;color:#2b2c20;}div.GridNoSelForest .rgRow td{border-color:#d1deb6;}div.GridNoSelForest .rgAltRow td{border-color:#c7d6a7;}.GridNoSelForest .rgRow a,.GridNoSelForest .rgAltRow a{color:#2b2c20;}");
        RadGridStyles.Add("Hay", "div.GridNoSelHay .rgRow{background:none transparent;}div.GridNoSelHay .rgAltRow{background:#ececd8;}div.GridNoSelHay .rgRow td{border-color:#fff #fff #fff #bbb99d;}div.GridNoSelHay .rgAltRow td{border-color:#ececd8 #ececd8 #ececd8 #bbb99d;}div.GridNoSelHay .rgRow td,div.GridNoSelHay .rgAltRow td{border-left-width:1px;padding-left:7px;border-right-width:1px;padding-right:7px;}");
        RadGridStyles.Add("Office2007", "div.GridNoSelOffice2007 .rgRow,div.GridNoSelOffice2007 .rgAltRow{background:none transparent;}div.GridNoSelOffice2007 .rgRow td,div.GridNoSelOffice2007 .rgAltRow td{border-color:#d0d7e5;border-left-width:1px;padding-left:7px;}");
        RadGridStyles.Add("Outlook", "div.GridNoSelOutlook .rgRow,div.GridNoSelOutlook .rgAltRow{background:none transparent;}div.GridNoSelOutlook .rgRow td,div.GridNoSelOutlook .rgAltRow td{border-color:#d0d7e5;border-left-width:1px;padding-left:7px;}");
        RadGridStyles.Add("Simple", "div.GridNoSelSimple .rgRow{background:none transparent;color:#000;}div.GridNoSelSimple .rgAltRow{background:#ededed;color:#000;}div.GridNoSelSimple .rgRow td{border-color:#fff #c3c3c3;}div.GridNoSelSimple .rgAltRow td{border-color:#ededed #c3c3c3;}div.GridNoSelSimple .rgRow a,div.GridNoSelSimple .rgAltRow a{color:#000;}");
        RadGridStyles.Add("Sitefinity", "div.GridNoSelSitefinity .rgRow{background:none transparent;}div.GridNoSelSitefinity .rgAltRow{background:#f1f1f1;}div.GridNoSelSitefinity .rgRow td,div.GridNoSelSitefinity .rgAltRow td{border-color:#eee;}");
        RadGridStyles.Add("Sunset", "div.GridNoSelSunset .rgRow{background:none transparent;}div.GridNoSelSunset .rgAltRow{background:#f1e9dc;}div.GridNoSelSunset .rgRow td{border-color:#fff #fff #fff #cabaab;}div.GridNoSelSunset .rgAltRow td{border-color:#f1e9dc #f1e9dc #f1e9dc #cabaab;}div.GridNoSelSunset .rgRow td,div.GridNoSelSunset .rgAltRow td{border-left-width:1px;padding-left:7px;border-right-width:1px;padding-right:7px;}");
        RadGridStyles.Add("Telerik", "div.GridNoSelTelerik .rgRow{background:none transparent;}div.GridNoSelTelerik .rgAltRow{background:#f2f2f2;}div.GridNoSelTelerik .rgRow td{border-color:#fff;}div.GridNoSelTelerik .rgAltRow td{border-color:#f2f2f2;}");
        RadGridStyles.Add("Vista", "div.GridNoSelVista .rgRow,div.GridNoSelVista .rgAltRow{background:none transparent;}div.GridNoSelVista .rgRow td,div.GridNoSelVista .rgAltRow td{border-left:1px solid;border-right:1px solid;border-color:#fff #fff #fff #ededed;padding-left:7px;padding-right:7px;}");
        RadGridStyles.Add("Web20", "div.GridNoSelWeb20 .rgRow,div.GridNoSelWeb20 .rgAltRow{background:none transparent}div.GridNoSelWeb20 .rgRow td,div.GridNoSelWeb20 .rgAltRow td{border-color:#fff #fff #cfd9e7 #829cbf;border-left-width:1px;padding-left:8px;border-right-width:1px;padding-right:8px;}");
        RadGridStyles.Add("WebBlue", "div.GridNoSelWebBlue .rgRow{background:none transparent;}div.GridNoSelWebBlue .rgRow td{border-color:#fff #fff #fff #dae2e8;}div.GridNoSelWebBlue .rgAltRow{background:#dae2e8;}div.GridNoSelWebBlue .rgAltRow td{border-color:#dae2e8;}div.GridNoSelWebBlue .rgRow td,div.GridNoSelWebBlue .rgAltRow td{border-left-width:1px;border-right-width:1px;padding-left:7px;padding-right:7px;}");
        RadGridStyles.Add("Windows7", "div.GridNoSelWindows7 .rgRow{background:#ebeff3;}div.GridNoSelWindows7 .rgRow td{border-color:#ebeff3;}div.GridNoSelWindows7 .rgAltRow{background:none transparent;}div.GridNoSelWindows7 .rgAltRow td{border-color:#fff;}div.GridNoSelWindows7 .rgRow td,div.GridNoSelWindows7 .rgAltRow td{border-left-width:1px;border-right-width:1px;padding-left:7px;padding-right:7px;}");
    }

    protected void Page_PreRender(object sender, EventArgs e)
    {
        RadGrid1.SelectedIndexes.Add(0);
        RadGrid1.SelectedIndexes.Add(1);
        RadGrid1.CssClass = String.Format("GridNoSel{0}", RadSkinManager1.Skin);

        RadGrid2.SelectedIndexes.Add(0);
        RadGrid2.SelectedIndexes.Add(1);

        string additionalRadGridStyles = String.Format("<style type='text/css'>{0}</style>", RadGridStyles[CurrentSkin]);
        Page.Header.Controls.Add(new LiteralControl(additionalRadGridStyles));
    }

</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:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true"
    OnSkinChanged="RadSkinManager1_SkinChanged" />

<br /><br />

<p>RadGrid with removed selection styles</p>

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    AllowMultiRowSelection="true"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <ClientSettings EnableRowHoverStyle="true">
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
    <MasterTableView>
        <Columns>
            <telerik:GridClientSelectColumn />
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

<br /><br />

<p>RadGrid with default selection styles</p>

<telerik:RadGrid
    ID="RadGrid2"
    runat="server"
    AllowMultiRowSelection="true"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <ClientSettings EnableRowHoverStyle="true">
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
    <MasterTableView>
        <Columns>
            <telerik:GridClientSelectColumn />
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

</form>
</body>
</html>

Sincerely yours,
Dimo
the Telerik team