Is there any way to change the datagrid header color? I can change the cells but never seen an exemple of the header
Hello @Nuno Gonçalves,
I'm sorry, I thought what you wanted was different.
Then, what you can do is use the property cssClassAll which will allow you to set a CSS class name to use when rendering all cells (data and headers) in the column or row.
Try to add that cssClassAll: 'classThatYouWant' to the advancedFormat of the columns where you want to have that specific background-color. Check the image below:
Finally, you need to set the class on your css document:
.wj-colheaders > .wj-row > .wj-cell.paintHeaders{
background-color: orange;
}
If you want to paint the whole column just use:
.wj-row > .wj-cell.paintHeaders{
Hope this one helps you.
Thank you,
Tiago Pereira
Hi Nuno,
Look this example:
Hope this help
Regards.
Im not having problem on the normal table, my question is on DataGrid , a forge component
right,
which data grid exactly? web or reactive ?
the web one
You can click on the DataGrid Header field and then go into properties window and from there select Style from the right tab, in that you will find to property Color( as marked in the below snap), from there you can change the color of the Header too.
Hope this will help you, Kindly let me know if it is working or not.
Thanks:)
Regarding the colors of the column headers, could you please confirm if this is a possible solution?
If you want to change the background-color of the column headers:
.wj-flexgrid .wj-colheaders > .wj-row > .wj-cell.wj-header {
background-color: blue;
If you want to change the background-color of the row headers:
.wj-flexgrid .wj-rowheaders > .wj-row > .wj-cell.wj-header {
background-color:red;
If you want to change the background-color of top-left cells:
.wj-flexgrid .wj-topleft > .wj-row > .wj-cell.wj-header {
background-color: green;
This way you will end up with the following configuration:
You can also change all of them by using:
.wj-flexgrid .wj-colheaders > .wj-row > .wj-cell.wj-header,
.wj-flexgrid .wj-rowheaders > .wj-row > .wj-cell.wj-header,
Or:
.wj-flexgrid .wj-row > .wj-cell.wj-header {
background-color:blue;
Hope this answer is useful.
Hi Tiago,
i already managed to reach this point but still doenst solve my problem, I only want to change the color of 3 headers. For example I want to turn yellow the 3th,4th and 5th header of the datagrid
It worked, thank you very much !!