TreeGrid grid line styling issue

[Zachary]

I'm having a tough time figuring out how to restyle the TreeGrid. I want to change the border colors. I was trying to accomplish this via the column customattributes properties, but as best I can tell it does not work for higher up elements like eGrid. I am using scss for the project.

1) Is it possible to have the css coe in the scss file of my component or does it have to go in styles.scss?

2) I am restyling a single treegrid, so i don't want these changes to be global to all treegrids.

3) How can I change the row borders for the egrid, header row, and normal rows to a different color?

4) How can I change the expand/contract arrow to a different value?

Attachment: Screenshot_20210830_172053_d218e719.zip

[Jagadesh Ram Raajkumar]

Hi Zachary, 

Greetings from Syncfusion Support. 

Query 1,2: Is it possible to have the css code in the scss file of my component or does it have to go in styles.scss?, I am restyling a single treegrid, so i don't want these changes to be global to all treegrids. 

 

You can use valid CSS code in a .scss file. If you want to apply styling only to a particular treegrid, you can make use of the id property to set a unique id and use the id to apply styling.  

Query 3,4: How can I change the row borders for the egrid, header row, and normal rows to a different color?, How can I change the expand/contract arrow to a different value? 

 

To override default styling in treegrid you can find the list of classes that can be used to achieve your requirement down below please refer to it. By using the content CSS property you can change the expand/collapse icon in the CSS classes of .e-treegridexpand and .e-treegridcollapse respectively. 

For your convenience we have prepared a sample based on your requirement, please find it below,
Sample: https://stackblitz.com/edit/angular-f168479?file=app.component.ts 

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

Please get back to us for further assistance. 

Regards,
Jagadesh Ram 

[Zachary]

In the sample you provided the  .e-treegridexpand and  .e-treegridcollapse are not having an affect on the grid. I believe 

\2795

is supposed to change it to a plus sign, but it's a triangle instead. I tried to change it to other values, but they did not have an 

[Zachary]

Looks like I am all set. This was the css style I used to change the expand/collapse colors. Thanks for the help!

#treegrid .e-treegrid .e-treegridexpand, .e-treegrid .e-treegridexpand{

    color: white;

}

    

#treegrid .e-treegrid .e-treegridexpand, .e-treegrid .e-treegridcollapse{

    color: white;

}

[Jagadesh Ram Raajkumar]

Hi Zachary, 

Thanks for the update. 

We are happy to hear that your requirement has been achieved. Please get back to us if you need further assistance. 

Regards,
Jagadesh Ram