MultiRow Merging questions.

Posted by: jkshin0 on 6 February 2019, 2:14 pm EST

  • Posted 6 February 2019, 2:14 pm EST

    Hi.
    It works.
    I have spent a lot of time and surfing to express the following screen but I can not find a way to contact you.
    Please take a look at the screen and its content,
    Thank you.
    Even if English is awkward, you can understand it.


    [.ts source]
    import { Component, OnInit, ViewChild } from '@angular/core';
    import * as wjcCore from 'wijmo/wijmo';
    import * as wjcGrid from 'wijmo/wijmo.grid';
    import * as wjcMultiRow from 'wijmo/wijmo.grid.multirow';

    @Component({
    selector: 'app-wj1',
    templateUrl: './wj1.component.html',
    styleUrls: ['./wj1.component.scss']
    })
    export class Wj1Component implements OnInit {

    layoutDefinition = [
    {
    header: 'No', colspan: 1,
    cells: [
    { binding: 'a1', header: 'No', width: 40 }
    ]
    },
    { cells: [{ binding: 'x1', header: 'A1', width: 40, }, { binding: 'a2', header: 'A2' }] },
    { cells: [{ binding: 'x2', header: 'B1' }, { binding: 'b2', header: 'B2' }] },
    {
    cells: [
    { binding: 'x3', header: 'C2', width: 30, colspan: 2 },
    { binding: 'x4', header: 'C3', width: 10 }, { binding: 'c3', header: 'C4', width: 30 }
    ]
    },
    { cells: [{ binding: 'x5', header: 'D1', width: 40 }, { binding: 'a5', header: 'D2' }] },
    { cells: [{ binding: 'x6', header: 'E1', width: 40 }, { binding: 'a6', header: 'E2' }] },
    { cells: [{ binding: 'x7', header: 'F1', width: 40 }, { binding: 'a7', header: 'F2' }] },
    {

    header: 'G1', colspan: 1,
    cells: [
    { binding: 'x8', header: "G1", width: 40 },
    ]
    },
    {
    header: 'H1', colspan: 2,
    cells: [{ binding: 'X10', header: 'H1', width: 20, colspan: 1 },
    { binding: 'x11', header: 'H1', width: 80, colspan: 1 },
    { binding: 'x12', header: 'H1', width: 15, colspan: 1 },
    { binding: 'x13', header: 'H1' }]
    },

    { cells: [{ binding: 'x14', header: 'TITLE1', width: 65 }, { binding: 'x15', header: 'J1' }] },
    { cells: [{ binding: 'x16', header: 'TITLE1', width: 65 }, { binding: 'x17', header: 'J2' }] },
    { cells: [{ binding: 'x18', header: 'TITLE1', width: 65 }, { binding: 'x20', header: 'J3' }] },
    { cells: [{ binding: 'x21', header: 'K1' , width: 65 }, { binding: 'x22', header: 'K1' }] },
    ];

    getSampleData(count) {
    let data = [];
    for (let i = 0; i < count; i++) {
    data.push({
    x1: "a" + i,
    x2: i,
    active: false
    });
    }
    return data;
    }

    constructor() { }

    @ViewChild('multi_grid') multi_grid: wjcMultiRow.MultiRow;
    data: wjcCore.CollectionView;
    ngOnInit() {
    this.data = new wjcCore.CollectionView(this.getSampleData(5));
    //this.multi_grid.mergeManager = new CustomMergeManager(this.multi_grid);
    }

    }

    export class CustomMergeManager extends wjcGrid.MergeManager {

    getMergedRange(panel: wjcGrid.GridPanel, r: number, c: number, clip = true): wjcGrid.CellRange {

    if(panel.cellType!=wjcGrid.CellType.ColumnHeader){
    return super.getMergedRange(panel,r,c,clip);;
    }

    // create basic cell range
    var rg = new wjcGrid.CellRange(r, c);
    // expand left/right
    for (var i = rg.col; i < panel.columns.length - 1; i++) {
    if (panel.getCellData(rg.row, i, true) != panel.getCellData(rg.row, i + 1, true))
    break;
    rg.col2 = i + 1;
    }
    for (var i = rg.col; i > 0; i--) {
    if (panel.getCellData(rg.row, i, true) != panel.getCellData(rg.row, i - 1, true))
    break;
    rg.col = i - 1;
    }

    // expand up/down
    for (var i = rg.row; i < panel.rows.length - 1; i++) {
    if (panel.getCellData(i, rg.col, true) != panel.getCellData(i + 1, rg.col, true))
    break;
    rg.row2 = i + 1;
    }
    for (var i = rg.row; i > 0; i--) {
    if (panel.getCellData(i, rg.col, true) != panel.getCellData(i - 1, rg.col, true))
    break;
    rg.row = i - 1;
    }
    // done
    return rg;
    }

    }

    [.html source]
    <wj-multi-row #multi_grid
    id="multi_grid"
    [allowSorting]="false"
    [layoutDefinition]="layoutDefinition"
    [itemsSource]="data"
    [autoGenerateColumns]="false"
    [selectionMode]="'RowRange'"
    [allowResizing]="0"
    style="height:50vh">
    </wj-multi-row>


  • Replied 6 February 2019, 2:18 pm EST

    Sorry. Mudge the screen again.
  • Replied 6 February 2019, 4:22 pm EST

    Hi,

    Thank you for sharing the screenshots. However I am really sorry as I am unable to understand the issue. Could you please elaborate the problem?
  • Replied 7 February 2019, 11:27 am EST

    When using the basic MultiRow
    Data Row Merge Correctly
    so
    Using the CustomMergeManager for Title Merge,
    Data Row Splitting Error.
  • Marked as Answer

    Replied 7 February 2019, 4:32 pm EST

    Hi,

    MultiRow implements a custom merge manager of its own. So assigning a CustomMergeManager is overriding the MergeManager for the multirow which is causing all the issue.
    What we could do here is, save the instance of the old MergeManager in our CustomMergeManager and then instead of calling super.getMergedRange(), we should call oldMergeManager.getMergedRange() method.
    Please refer to the following sample which demonstrates the same:
    https://stackblitz.com/edit/angular-azcdqk?file=app%2Fcustom-merge-manager%2FcustomMergeManager.ts
  • Replied 7 February 2019, 5:20 pm EST

    Oh! Thank you.

    I have been thinking for a long time
    Thanks for your help.

    Wijmo Very Good !!!
Need extra support?

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

Learn More

Forum Channels