Change Highlight Color

[Ryan]

Hello - I would like to customize the background color of a row when it's highlighted and selected.  I've tried the following, but it only works a little.

When hovered, the background color changes, but an ugly gray border still exists along the bottom of the row.  Also, when selected, my desired background color only shows up when the selected row is hovered, not all the time.

The ASP/CSS I'm using are below:

ASP for Grid:

<!-- Grid -->
<telerik:RadGrid runat="server" ID="rgReport">
    <%-- Client settings --%>
    <ClientSettings EnableRowHoverStyle="true" Selecting-AllowRowSelect="true" />
    <%-- SelectedItemStyle settings --%>
    <SelectedItemStyle BackColor="Black" />

    <%-- MasterTableView Settings --%>
    <MasterTableView AllowSorting="true" Caption="" Summary="" ItemStyle-VerticalAlign="Top" />
</telerik:RadGrid>

CSS for Grid:

tr.rgRow:hover, tr.rgAltRow:hover
{
    background-image: none;
    background-color: #E9E8D1;
    border-bottom: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

Please let me know what I can do...  Thanks!

-Ryan

[Dimo]

Hi Ryan,

You should use completely different CSS classes and no :hover pseudo class.

1. For hovered rows, use this for backgrounds

div.RadGrid_SkinName  .rgHoveredRow
{
        ...........
}

and this for border colors:

div.RadGrid_SkinName  .rgHoveredRow  td
{
        ...........
}


2. For selected rows use respectively

div.RadGrid_SkinName  .rgSelectedRow
{
        ...........
}

and

div.RadGrid_SkinName  .rgSelectedRow  td
{
        ...........
}


Hovered row styles should be placed after selected rows' styles, so that the former take precedence.

I recommend you to dump that BackColor property altogether and use CSS only.


http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx


Regards,
Dimo
the Telerik team

[Ryan]

Thanks for the help - that was exactly what I was looking for.  Everything works!  Thanks again.