1. Home
  2. Forum
  3. React - EJ 2
  4. Change color of selected row in grid with grandchildren

Change color of selected row in grid with grandchildren

Hi,

I have a grid with a child grid which has a child grid; basically a grid with grandchildren :)

I would like to change the color of the selected row for the grid, child grid and child child grid (grandchild).
I've that fot the grid and child grid it work well using the CSS:

.e-grid td.e-active {
background-color: blue;
}

but it doesn't work for the grand child.

Can you please help me out?

5 Replies 1 reply marked as answer
BS Balaji Sekar Syncfusion Team December 16, 2020 03:47 PM UTC

Hi Walter, 
 
Thanks for your valuable patience. 
 
In our sample we have applied the mentioned external CSS but we are unable to reproduced the reported problem. Please refer the below sample for more information. 
 
 
We have shared the screenshot with your requirement achieved in the hierarchy Grid as given below. 
 
Screenshot: 
 
 
If still facing same problem please replicate the reported problem in above sample and share to us that will help to validate further. 
 
Regards, 
Balaji Sekar 


Marked as answer
WK Walter Konnerth December 17, 2020 06:50 AM UTC

Hi,

Thanks for the example! It's working well.
I forgot to mention that I applied a custom CSS to the child and grandchild:

/* Heading colour of the Child Grid (I think the .e-headercontent is not necessary?? */
.e-detailcell .e-grid .e-headercontent .e-headercell,
.e-detailcell .e-grid .e-detailheadercell {
background-color: yellow; /* green; */
}

/* Heading colour of Grandchild grid */
.e-detailcell .e-detailcell .e-grid .e-headercontent .e-headercell,
.e-detailcell .e-detailcell .e-grid .e-detailheadercell {
background-color: green;
}

/* Body of child */
.e-detailcell .e-rowcell {
background-color: lightyellow;
}

/* Body of grandchild */
.e-detailcell .e-detailrow .e-rowcell {
background-color: lightgreen;
}

and in this case it's not working for the grandchild.
Can you please help me out?

Thanks,

RS Rajapandiyan Settu Syncfusion Team December 18, 2020 08:44 AM UTC

Hi Walter, 

We have validated your query with the given CSS Styles. You can achieve your requirement by using below CSS Classes. 

<style>      
    /* selected row of grandchild */ 
    .e-detailcell .e-detailrow td.e-rowcell.e-active { 
      background-color: red; 
    } 
  </style> 

Find the below sample for your reference. 


Still, if you face the same issue, please share the below details with us. 

  1. Share the full Grid rendering code you have used.
  2. If possible, share the issue reproduced sample or make the issue in the given sample.

Regards, 
Rajapandiyan S 


WK Walter Konnerth December 18, 2020 10:01 AM UTC

Thanks, it helped me a lot!!

BS Balaji Sekar Syncfusion Team December 21, 2020 05:48 AM UTC

Hi Walter, 
  
We glad that your issue has been fixed. 
  
Please get back to us if you require further other assistance from us. 
  
Regards, 
Balaji Sekar. 


Loader.
Up arrow icon