18
Views
10
Comments
Solved
Data Grid Header Color
Question

Is there any way to change the datagrid header color? I can change the cells but never seen an exemple of the header

Staff
Rank: #483
Solution

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{

    background-color: orange;

}


Hope this one helps you.

Thank you,

Tiago Pereira

Rank: #151

Hi Nuno,

Look this example:

Hope this help

Regards.

Rank: #6690

Im not having problem on the normal table, my question is on DataGrid , a forge component

Rank: #151

right,

which data grid exactly? web or reactive ?



Rank: #6690
Rank: #994

Hi Nuno,


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:)

Rank: #6690

Im not having problem on the normal table, my question is on DataGrid , a forge component

Staff
Rank: #483

Hello @Nuno Gonçalves,

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,

.wj-flexgrid .wj-topleft > .wj-row > .wj-cell.wj-header {

    background-color: blue;

}

Or:

.wj-flexgrid .wj-row > .wj-cell.wj-header {

    background-color:blue;

}

This way you will end up with the following configuration:


Hope this answer is useful.  

Thank you,

Tiago Pereira

Rank: #6690

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 

Staff
Rank: #483
Solution

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{

    background-color: orange;

}


Hope this one helps you.

Thank you,

Tiago Pereira

Rank: #6690