Merge columnHeader

Posted by: bmakhlin on 21 August 2018, 6:37 pm EST

  • Posted 21 August 2018, 6:37 pm 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'

    • 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
  • Marked as Answer

    Replied 22 August 2018, 5:49 am 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels