How can i change slickgrid header background color based on a condition?

Question

I am using a angular-slickgrid = 2.30.2 ,Angular 10, i am using styles.css where i am loading the slickgrid theme through bootstrap .sass file. i have created a shared slickgrid component and using it in parent components wherever required.

1. i want to change the slick grid header color based on a condition in my parent component. For e.g if my variable value is true then show slickgrid header blue else red, how can i do that?

2. i want to add bottom border for every third row in grid for only one screen/component which is using slick grid, how can I implement that.

i am new to slickgrid , please guide.

Answer 1

Please note that I'm the author of Angular-Slickgrid, there are already plenty of SO questions and answers on how to style SlickGrid, take for example these:

• Setting SlickGrid cell styling based on cell value
• how do I apply a class to the header cell for a column in slickgrid
• Angular SlickGrid align header text
• How to add a class to a cell in SlickGrid

and/or simply use the Column properties cssClass or headerCssClass from the Column interface. I added TypeScript types for everything in latest version which should give you enough indication of what you can try.

Also please remember that Angular-Slickgrid is a wrapper of SlickGrid, searching for SlickGrid will always provide you more result to your question searches

Lastly you're on an older version (2.x) that I no longer support, you should think about migrating eventually to get access to newer features and smaller builds, see Migration Guide 3.x and Migration Guide 4.x