How to change background colour of flexgrid column group header rows

How to change background colour of flexgrid column group header rows

Posted by: zam.abdulvahid on 11 June 2018, 10:41 am EST

• 

  zam.abdulvahid

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 June 2018, 10:41 am EST - Updated 3 October 2022, 3:05 am EST

  In flexgrid column groups, how to fill the header cells with different background colour.

  Reference image attached.

  

  1203×284 31.8 KB

  Reference sample code - http://demos.wijmo.com/5/Angular2/ColumnGroups/ColumnGroups/

  Thanks in advance.
  
  ~ Zam

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 11 June 2018, 10:45 pm EST

  Hi Zam,
  
  You may use a combination of CSS along with formatItem event to get the desired result.

  /* CSS */
  .wj-colheaders .wj-header{
  --bg-color:"#eaeaea";
  background-color: var(--bg-color);
  }
  

  /* formatItem event handler */
  flex.formatItem.addHandler((s:wjcGrid.FlexGrid,e:wjcGrid.FormatItemEventArgs )=>{
     if(e.panel.cellType==wjcGrid.CellType.ColumnHeader){
        if(e.row==1){
           e.cell.style.setProperty("--bg-color","cyan");
        }
       else if(e.row==0){
           switch(e.panel.columns[e.col].binding){
                case "perf.ytd":
                case "perf.m1":
  		case "perf.m6":
  		case "perf.m12": e.cell.style.setProperty("--bg-color","pink");break;
  		case "alloc.stock":
  		case "alloc.bond":
  		case "alloc.cash":
  		case "alloc.other":e.cell.style.setProperty("--bg-color","yellow");break;
  		default: e.cell.style.setProperty("--bg-color","#eaeaea");break;
  	   }
  	}
  }
  

  Please refer to the following example which implements the same:-
  
  https://stackblitz.com/edit/angular-7yhc73?file=app%2Fapp.component.ts

  ~Manish

• 

  zam.abdulvahid

  • Post Options:
  • Link
    Copy

  Posted 13 June 2018, 4:06 am EST

  This worked perfectly. Thank you Manish

  ~Zam

• 

  jameskell001

  • Post Options:
  • Link
    Copy

  Posted 27 November 2022, 7:15 pm EST

  Its really works thanks for sharing this information.