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

Css - different colors for different detail grid in radgrid

2 Answers 28 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dheeraj
Top achievements
Rank 1
Dheeraj asked on 02 May 2014, 01:44 PM
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 





2 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 07 May 2014, 03:50 AM
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
0
Venelin
Telerik team
answered on 07 May 2014, 09:45 AM
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
 

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
Dheeraj
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Venelin
Telerik team
Share this question
or