Author Topic: Change header cell's style  (Read 3541 times)

kiwon34

  • Pro Ultimate
  • Jr. Member
  • *
  • Posts: 52
    • View Profile
Change header cell's style
« on: July 17, 2017, 04:57:38 pm »
Hello,

Is there a way to change the style(ex. color, font, etc) of each header cell? I want to change the style for each header directly by script.
Is there a simple way to do so?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Change header cell's style
« Reply #1 on: July 17, 2017, 08:05:38 pm »
With css:

Assign column.cls ( e.g., someClass ) and write css rules that are applicable to header cells only.

Code: [Select]
.pq-grid-col.someClass{
  font-size: 15px;
  ...
}

With script:

Get reference to header cell with getCellHeader
https://paramquery.com/pro/api#method-getCellHeader

and assign css ( use jQuery css method ) in refreshHeader event of the grid.

Code: [Select]
grid.on('refreshHeader', function(){
  this.getCellHeader({}).css(.. your custom css ..);
})

kiwon34

  • Pro Ultimate
  • Jr. Member
  • *
  • Posts: 52
    • View Profile
Re: Change header cell's style
« Reply #2 on: July 19, 2017, 03:26:29 pm »
Thank you very much! It helped a lot.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Change header cell's style
« Reply #3 on: January 02, 2020, 09:36:37 am »
There is easier and convenient API in v7 for header cells.

https://paramquery.com/pro/api#option-column-styleHead