Customize column styles and rows in the Tree Grid component, with some custom CSS classes

[MM]

Hello everybody,

I am using Angular 7 and Syncfusion controls 17.3.27. 

What I want to do is to customize column styles and rows in the  Tree Grid component, with some custom CSS classes.

For example round borders in the tree grid row, more spacing between rows, different font, transparent background color, and red color for headers. 

I have tried to use  [customAttributes]='customAttributes', but it seems it's not working with the dynamic columns. Here is my example on stackblitz.com, I hope that you can help me (an example is on Angular 8 and Syncfusion 14.4.51) but the result is the same, nothing is happening.

Example

Best regards,

M

[Padmavathy Kamalanathan]

Hi M, 

 

Thanks for contacting Syncfusion Forums. 

 

Query 1: I have tried to use  [customAttributes]='customAttributes', but it seems it's not working with the dynamic columns. 

 

We are able to set custom CSS to dynamic columns using the “customAttribute” property of Tree Grid columns. In your sample, we have set “customcss” class to the “customAttribute” property of “taskID” column and it works as expected.  

 

NOTE: The style customization works only when we elevate the CSS to global scope using the encapsulation: ViewEncapsulation.None. If you need to apply style for ViewEncapsulation other than None, use ng-deep like shown in the below help documentation, 

https://ej2.syncfusion.com/angular/documentation/treegrid/how-to/treegrid-styling/   

 

Please check the below code snippet, 

 

Solution using ViewEncapsultion.None 

  

  private createTreeGridColumns() { // method for dynamic column 

    return [ 

      { 

        field: "taskID", 

        headerText: "Task ID", 

        editType: "defaultedit", 

        customAttributes: { class: "customcss" } 

      },  

    ]; 

  } 

  

Please check the below screenshot, 

 

 

  

Please check the below sample, 

https://stackblitz.com/edit/angular-custom-css?file=app.component.ts  

 

Please check the below help documentation, 

https://ej2.syncfusion.com/angular/documentation/treegrid/how-to/customize-column-styles/  

 

Query 2: more spacing between rows 

 

You can customize the row height of treegrid rows through the rowHeight property. Please check the below help documentation, 

https://ej2.syncfusion.com/angular/documentation/treegrid/row/#row-height  

 

If you face any issues in implementing the above solution, kindly get back to us with the below requested details, 

1. Complete Tree Grid rendering code with CSS customization
2. Video demo and Screenshot of issue/requirement
3. If possible, share us issue reproducible sample or reproduce the issue in the sample shared above.

 

Regards, 

Padmavathy Kamalanathan           

[MM]

Thank you for the quick answer.

Manage to change almost everything but round borders in the rows and higher spacing between the rows are not easy.

Something like this, maybe you can help me.

Example

[Pon Selva Jeganathan]

  

  

Hi MM,   

  

Thanks for the update.   

  

Query1: round borders in the rows 

 

We achieved your query by using border radius and background color property in CSS class. Please refer to below code snippet, 

 

  

Your CSS code:  

.e-treegrid .e-headercell.customcss {  

  font-family:  'sans-serif';  

  color: blue;  

  text-align: start;  

  border-style: none;  

}  

  

  

Modified code:  

  

.e-treegrid .e-headercell.customcss {  

  background-color: #2382c3;  

  font-family: "sans-serif";  

  color: red;  

  text-align: start;  

  border-radius: 50px;  

}  

   

 

 

Please refer to the below screenshot: 

 

 

 

Please refer to the below sample:  

 https://stackblitz.com/edit/angular-custom-css-vr3xsz?file=app.component.css 

 

Query2:  higher spacing between the rows  

 

Based on your query, we've modified the row height using 'rowHeight' treegrid property. Please refer to the below code example 

 

Your CSS code:  

<ejs-treegrid id='TreeGrid' ….. (rowDrop)='rowDrop($event)'  

        (rowDragStart)='rowDragStart($event)' (rowDrag)='rowDrag($event)' [columns]="treeColumns" rowHeight='60'  [gridLines]='lines' >  

  

  

Modified code:  

  

<ejs-treegrid id='TreeGrid' … (rowDrag)='rowDrag($event)' [columns]="treeColumns" rowHeight='30'  

        [gridLines]='lines'>  

   

 

Please refer to the below screenshot, 

 

 

  

  

Please refer to the below API documentation, demo link: 

https://ej2.syncfusion.com/angular/demos/#/material/treegrid/rowheight 

https://ej2.syncfusion.com/angular/documentation/api/treegrid/#rowheight 

https://ej2.syncfusion.com/angular/documentation/treegrid/row/#row-height 

 

If you face any issues in implementing the above solution, kindly get back to us with the below requested details,   

1. Complete Tree Grid rendering code  
2. Video demo and Screenshot of issue/requirement 
3. If possible, share us issue reproducible sample or reproduce the issue in the sample shared above. 

Kindly get back us to further assitnce.  

   

Regards,   

Pon selva    

[MM]

Hello,

Sorry, maybe you did not understand me. The border should be present only in the first column and in the last column not in every cell.

Something like this:

[Pon Selva Jeganathan]

Hi MM,    

   

Query1: round borders in the rows  

  

We achieved query by using the border radius property in the CSS class.  We have to apply the border radius property to the first and last cell in the row.  You can add the gap between two rows in a table using the CSS border-spacing and border-collapse. Please refer to below code snippet,  

 

   

  

// change  the style on rows  

e-treegrid .e-rowcell.customcss {  

  border-radius: 10px 0 0 10px;  

}  

.e-treegrid .e-rowcell.e-unboundcell { // last cell of the row  

  border-radius: 0 10px 10px 0;  

}  

.e-treegrid .e-table {  

  border-collapse: separate;  

  border-spacing: 0 1em;  

  background-color: #e0dbf3;  

  border: none;  

}  

.e-treegrid .e-rowcell {  

  border: none;  

}  

  

…  

  

// change the style on header row  

.e-treegrid .e-headercell.customcss {  

  border-radius: 10px 0 0 10px;  

}  

.e-treegrid .e-headercell.e-lastcell.e-rightalign {  

  border-radius: 0 10px 10px 0;  

}  

  

  

  

Please refer to the below screenshot:  

  

  

  

Please refer to the below sample:   

https://stackblitz.com/edit/angular-custom-css-7nuqdp?file=app.component.css 

   

Kindly get back us to further assistance.   

    

Regards,    

Pon selva     

 

[MM]

Thank you.

[Pon Selva Jeganathan]

Hi MM,  

  

You are most welcome.   

  

Please get back to us if you need any other assistance.  

  

Regards,  

Pon selva