Nuno Gonçalves
Rank: #6690
18Views
10Comments
Solved
Data Grid Header Color
Question
DataGrid

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

0
0
on 22th Jan
Copy link to comment
Tiago Miguel Pereira
Staff
Rank: #483
Solution

Replying to Nuno Gonçalves' comment on 02 Feb 2021 16:04:29

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

See solution in context
0
0
on 2nd Feb
Copy link to comment
Agno Silveira
Rank: #151

Hi Nuno,

Look this example:

Hope this help

Regards.

0
0
on 22th Jan
Copy link to comment
Nuno Gonçalves
Rank: #6690

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

1
0
on 22th Jan
Copy link to comment
Agno Silveira
Rank: #151

Replying to Nuno Gonçalves' comment on 22 Jan 2021 14:42:52

right,

which data grid exactly? web or reactive ?



0
0
on 22th Jan
Copy link to comment
Nuno Gonçalves
Rank: #6690
0
0
on 22th Jan
Copy link to comment
Ajay Sharma
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:)

0
0
on 22th Jan
Copy link to comment
Nuno Gonçalves
Rank: #6690

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

0
0
on 22th Jan
Copy link to comment
Tiago Miguel Pereira
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

0
0
on 2nd Feb
Copy link to comment
Nuno Gonçalves
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 

0
0
on 2nd Feb
Copy link to comment
Tiago Miguel Pereira
Staff
Rank: #483
Solution

Replying to Nuno Gonçalves' comment on 02 Feb 2021 16:04:29

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

0
0
on 2nd Feb
Copy link to comment
Nuno Gonçalves
Rank: #6690
1
0
on 2nd Feb
Copy link to comment