How to merge empty column header into single cell

How to merge empty column header into single cell

Posted by: vinay.thakoor on 1 March 2021, 11:07 pm EST

• 

  vinay.thakoor

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 1 March 2021, 11:07 pm EST

  I am using column groups to show data in the grid. There are few cells that have empty column headers. I want to merge them into a single cell. I tried to use the ‘cssClass’ property but it’s applying CSS on both column headers and row in the grid. I tried in the ‘formatItem’ method but CSS is applying on both column and row.

  this is column group data

  
  this.columnGroups = [
  	{ binding: 'Name', header: 'Name', allowSorting: false },
  	{ header: 'Title', allowSorting: false, columns: [
  		{ binding: 'TitleCondition', header: ' ', allowMerging: true, allowSorting: false, dataMap: conditionDataMap},
  		{ binding: 'TitleValue', header: ' ', allowMerging: true, allowSorting: false, dataMap: titleDataMap}
  	]},
  	{ binding: 'Condition', header: 'Condition', allowSorting: false, dataMap: outerConditionDataMap },
  ]
  
  

  I want to merge empty column headers with the ‘Name’ column header. How to do that?

• 

  vinay.thakoor

  • Post Options:
  • Link
    Copy

  Posted 1 March 2021, 11:11 pm EST - Updated 3 October 2022, 2:15 pm EST

  I want to merge empty cells with the ‘Title’ column header.

  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 3 March 2021, 1:30 am EST

  Hi Vinay,

  When setting columnGroups, the original merging is overridden. You will need to override the getMergedRange method to manually merge the empty cells:

  https://stackblitz.com/edit/angular-9-0-0-rc-1-xczbzi

  Regards,
  
  Ashwin

• 

  vinay.thakoor

  • Post Options:
  • Link
    Copy

  Posted 4 March 2021, 8:01 am EST - Updated 3 October 2022, 2:15 pm EST

  Hi Ashwin,

  The example you gave is working but in that only blank cells are merging. I want to merge it with the Title column. like this

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 5 March 2021, 3:12 am EST

  Hi Vinay,

  Please refer to the updated sample link:

  https://stackblitz.com/edit/angular-9-0-0-rc-1-lujpdm

  ~regards

• 

  vinay.thakoor

  • Post Options:
  • Link
    Copy

  Posted 8 March 2021, 1:39 am EST

  Thanks, Ashwin! The example you provided above works great!

  Regards,
  
  Vinay

• 

  vinay.thakoor

  • Post Options:
  • Link
    Copy

  Posted 17 March 2021, 8:55 am EST

  Hi Ashwin,

  I have one more query. When I try to apply CSS on the column header CSS is applied on the column header as well as rows in that column. I want to center align the column header and left align cell data in that column. How to apply CSS on the column header?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 18 March 2021, 12:56 am EST

  Hi Vinay,

  You can restrict the css selector to only select the cells in the column header of the FlexGrid:

  .wj-flexgrid .wj-colheaders .wj-header.wj-cell.align-center {
    justify-content: center;
    text-align: center;
  }
  

  ~regards