jQWidgets Forums

Tagged: column headers, group headers, shading

This topic contains 5 replies, has 3 voices, and was last updated by alastairwalker 5 years, 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Changing the colour of column headers where column groups are present Posts
August 27, 2019 at 10:05 am Changing the colour of column headers where column groups are present #106596
alastairwalker
Participant
Hi – I need to be able to set the colour of individual column headers in a setup where header groups are used e.g.
```
-------------------------------------------------------------
| Group header 1      |  Group header 2                     |
|------------------------------------------------------------
| Column header 1     | Column header 2 | Column header 3   |
-------------------------------------------------------------
```
I have looked at various posts that indicate the use of the following type of code:

var firstNameCell = $(‘div .jqx-grid-column-header:eq(0)’);
firstNameCell.css(‘background-color’, ‘rosybrown’);

or similar, but I have been unable to figure out how to separately address the cells applying to the Group headers, and the column headers.

Can you point to any examples where this type of custom shading is performed?

Many thanks,
Alastair
August 28, 2019 at 4:43 am Changing the colour of column headers where column groups are present #106608

Peter Stoev
Keymaster

Hi Alastair,

For that purpose, you can use the column’s ‘classname’ property. Example: http://jsfiddle.net/82zv3gfx/

Best Regards,
Peter stoev

jQWidgets Team
https://www.jqwidgets.com/

August 28, 2019 at 6:14 am Changing the colour of column headers where column groups are present #106614

alastairwalker
Participant

Hi – Peter,

Thank you very much! Just what I am looking for!

Alastair

August 28, 2019 at 6:37 am Changing the colour of column headers where column groups are present #106615
alastairwalker
Participant
Hello – Peter,

A further question.

Regarding colour shading of column groups, i.e.
```
columnGroups: 
    [
        { text: 'Product Details', align: 'center', name: 'ProductDetails' },
        { text: 'Order Details', parentGroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },
        { text: 'Location', align: 'center', name: 'Location' }
    ]
```
Does this type of specification also support the classname property?

If not, how does one change the colour of a column group heading?

Many thanks,

Alastair
August 28, 2019 at 6:48 am Changing the colour of column headers where column groups are present #106616
admin
Keymaster
Hi Alastair,

A specific CSS class is added to the column groups. Ex: http://jsfiddle.net/87shky64/1/
```
 const headers = document.querySelectorAll('.jqx-grid-columngroup-header');
 
  for(let i = 0;i < headers.length; i++) {
      headers[i].classList.add('test');
  }
```
Best Regards,
Peter stoev

jQWidgets Team
https://www.jqwidgets.com/
August 28, 2019 at 11:55 am Changing the colour of column headers where column groups are present #106620

alastairwalker
Participant

Thank you very much!

Alastair
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.