We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Hierarchical Grid, Different Style In Parent and Child Header Rows

Thread ID:

Created:

Updated:

Platform:

Replies:

151306 Feb 6,2020 09:54 AM UTC Feb 12,2020 09:23 AM UTC Angular - EJ 2 5
loading
Tags: Grid
James
Asked On February 6, 2020 09:54 AM UTC

Sir, I can set the header style for the Grid using css and scss

But in a Hierarchical grid, how can I set a different header style for the parent grid and the child grid?

For example, the parent header row background is blue, while the child grids header rows are light blue?

James

Balaji Sekar [Syncfusion]
Replied On February 7, 2020 07:25 AM UTC

Hi James, 
 
Thanks for contacting us. 
 
You can differentiate parent and child grid selectors by differentiating ` e-detailcell` class. Based on that set you can set a different header style for the parent grid and the child grid. Please refer the code example and sample for more information. 
 
[App.component.ts] 
 
@Component({ 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    providers: [DetailRowService], 
    styles: [`.e-detailcell .e-grid .e-headercontent .e-headercell,.e-detailcell .e-grid .e-detailheadercell { 
    background-color: lightblue; 
} 
.e-grid .e-headercell,.e-grid .e-detailheadercell  { 
    background-color: blue; 
}`], 
    encapsulation: ViewEncapsulation.None 
}) 
export class AppComponent { 
    public parentData: Object[]; 
    public childGrid: GridModel; 
 
    ngOnInit(): void { 
. ..  
} 

 
 
Please get back to us, If you need further assistance. 
 
Regards, 
Balaji Sekar. 


Jayabharathi J [Syncfusion]
Replied On February 10, 2020 05:57 AM UTC

 
Thankyou, that works.   

However, if I have another child, so three levels of grids, Parent, Child, Grandchild. Howe can I set the row colour of the grandchild different to the child ? 

James 


Balaji Sekar [Syncfusion]
Replied On February 11, 2020 09:15 AM UTC

Hi James,  
  
Query: In three levels of grids, Parent, Child, Grandchild. How can I set the row color of the grandchild different to the child ?  
 
Based on your query, we suggest you to apply the CSS property in grid row cell of grand child Grid and you can achieve your requirement using the below code example and sample for more information.  
 
[App.component.ts] 

@Component({ 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    providers: [DetailRowService], 
    styles: [`.e-detailcell .e-grid .e-headercontent .e-headercell,.e-detailcell .e-grid .e-detailheadercell { 
    background-color: lightblue; 
.e-grid .e-headercell,.e-grid .e-detailheadercell  { 
    background-color: blue; 
.e-detailcell .e-detailrow .e-rowcell  { 
  background-color: yellow; // here you can apply css for the grand child row’s  
`], 
    encapsulation: ViewEncapsulation.None 
}) 
 
 
Please get back to us, if you have any other queries. We are happy to help you . 
 
Regards, 
Balaji Sekar. 


James
Replied On February 11, 2020 11:41 AM UTC

Thank you, I was actually asking for the header row of the grandchild grid. But you answer gave me enough information to work the pattern out

Summary: For others who come here seeking...

if you are using a Hierarchical grid and you want to make the grid headers  of each nested table a different colors, then use this:



//Heading colour of parent grid
.e-grid .e-headercell,.e-grid .e-detailheadercell  {
    background-coloryellow;
}
 


//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:  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:  blue


//Body of child 
 .e-detailcell  .e-rowcell  { 
    background-coloryellow
  } 

//Body of grandchild
 .e-detailcell .e-detailrow .e-rowcell  { 
    background-colororange
  }  




Manivel Sellamuthu [Syncfusion]
Replied On February 12, 2020 09:23 AM UTC

Hi James, 

Thanks for your update. 

We are happy to hear that you have found the solution on your own from the given sample code. Also we appreciate your efforts to help others. 

Please get back to us, if you need further assistance. 

Regards, 
Manivel 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon