Merge columnHeader

Merge columnHeader

Posted by: bmakhlin on 21 August 2018, 9:37 am EST

• 

  bmakhlin

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 21 August 2018, 9:37 am EST

  Hi,
  
  I have the following column header where the first row of column header has no value and the second row of column header has value of ‘User’

  
  * "* "[/li][li]User"
  "
  
  
  

  
      initGrid(flexGrid) {
          flexGrid.columnHeaders.rows.insert(0, new Row());
          flexGrid.allowMerging = 'ColumnHeaders';
          flexGrid.columnHeaders.columns[0].allowMerging = true;
          flexGrid.columnHeaders.rows[0].allowMerging = true;
          flexGrid.columnHeaders.rows[1].allowMerging = true;
      }
  
  

  I want to merge the both rows of the first column header but It does not work. What am I missing?
  
  thanks

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 21 August 2018, 8:49 pm EST

  Hi,

  As per the default behaviour, only cells with the same value can merge.
  
  So, if you want to merge the cells you may set the same value for both the cells.
  
  Please refer to the following code snippet:-

  flexGrid.columnHeaders.setCellData(0,0,'user');
  

  You may also refer to the following sample:-
  
  https://stackblitz.com/edit/angular-3nskjh?file=src%2Fapp%2Fapp.component.ts

  Another alternative to apply merging is by defining custom MergeManager class and assigning an instance of that class to the grid’s mergeManager property.
  
  Please refer to the following sample for custom MergeManager:-
  
  https://demos.wijmo.com/5/Angular/CustomMerging/CustomMerging/

  P.S. If you are trying to create multi-level column headers groups, you may refer to the following sample for an easy solution:-
  
  https://stackblitz.com/edit/angular-db4yfg?file=app%2Fapp.component.ts

  ~Sharad