Css - different colors for different detail grid in radgrid

[Dheeraj]

I have a radgrid with 3 levels i want to assign 3 different colors for different levels of grid and on click of the row there should not be any change to the selected row color. i could do it for mastertable and 2nd level detail table but the same color is being assinged to the 3rd level row selection. Please find below the attached file in which blue color is the 2nd level and 3rd level is the white color. 

As both the detail grids are using .rgDetailTable .rgSelectedRow  classes both are sharing common properties. How can i differentiate different Detail grids with .rgselectedrow class

below is the small code that i  did to achieve the first two levels of the grid.

 .rgMasterTable .rgSelectedRow {
            background: #c8e8a8 !important; 
            color:black !important;   
        }
        .rgDetailTable .rgSelectedRow {
            background:lightblue !important; 
            color:black !important;                                                                                                                                                                                                                                                                                                         
    how to achieve white background color if 3rd level grid row is selected. Thanks 

[Princy]

Hi Dheeraj,

You can set the css class for the corresponding detail tables as follows:

ASPX:

<MasterTableView >
  <DetailTables>
    <telerik:GridTableView CssClass="DetailTable1">
       <DetailTables>
           <telerik:GridTableView CssClass="DetailTable2">

CSS:

<style type="text/css">
    .rgMasterTable .rgSelectedRow
    {
        background: Blue !important;
    }
    .DetailTable1 .rgSelectedRow
    {
        background: Lightblue !important;
    }
    .DetailTable2 .rgSelectedRow
    {
        background: Red !important;
    }
</style>

Thanks,
Princy

[Venelin]

Hi,

"As both the detail grids are using .rgDetailTable .rgSelectedRow  classes both are sharing common properties."
--> Yes, this is exactly the reason why you observe the described behavior. To resolve it you can use Princy's approach, but you can get rid of the !important and rewrite the rules like this:

CSS:

.rgMasterTable tr.rgSelectedRow{
        background: blue;
}

...

Regards,
Venelin
Telerik