Apply css to header merging

Apply css to header merging

Posted by: parmarkinjalk on 12 May 2020, 11:48 pm EST

• 

  parmarkinjalk

  • Post Options:
  • Link
    Copy

  Posted 12 May 2020, 11:48 pm EST

  Hi Team,

  I am using the below wijmo example to merge 2 columns under one in my Angular app. How do I apply CSS to this column header,For E.g. in the below example how do I add css to ‘Amounts’(make it center align).I only want this ‘amounts’ header to be center aligned. Thanks.

  https://www.grapecity.com/wijmo/demos/Grid/Merging/HeaderMerging/angular

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 13 May 2020, 3:52 am EST

  Hi Kinjalk,

  Just as the columns are aligned vertically in the demo, you can also align columns horizontally, which is actually easier then aligning vertically. If the columnSpan of range is more than 1, then add the ‘wj-align-center’ class to the cell. So, add the following to the formatItem event:

  if(e.panel === s.columnHeaders && e.range.columnSpan > 1) {
  	e.cell.classList.add('wj-align-center');
  }
  

  Regards,
  
  Ashwin