Custom Merging

By default, FlexGrid applies merging to cells based on their content. In some cases, you may want to use different strategies for merging.

You can achieve this by defining a class that extends the wijmo.grid.MergeManager class and assigning an object of that type to the grid's mergeManager property.

Below example illustrates this by creating a grid that looks like a TV guide:

Walker

Morning Show

Sport

Weather

N/A

Today Show

Sesame Street

Football

Market Watch

Kid Zone

Soap Opera

News

Notice how the custom merge manager creates merged ranges that span both rows and columns. This is something the default merge manager does not do.

// This file locates: "Scripts/Lesson/C1FlexGrid/CustomMerging.js".
c1.documentReady(function () {
    // create an unbound grid with 5 rows and 7 columns
    var theGrid = wijmo.Control.getControl('#theGrid');
    while (theGrid.columns.length < 7) {
        theGrid.columns.push(new wijmo.grid.Column());
    }
    while (theGrid.rows.length < 5) {
        theGrid.rows.push(new wijmo.grid.Row());
    }
 
    // configure the grid
    theGrid.mergeManager = new wijmo.grid.CustomMergeManager(theGrid);
    theGrid.formatItem.addHandler(centerCell);
    theGrid.rowHeaders.columns[0].width = 80;
    theGrid.rows.defaultSize = 40;
    theGrid.showAlternatingRows = false;
    theGrid.isReadOnly = true;
 
    // populate the grid
    setData(theGrid.columnHeaders, 0, ',Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday'.split(','));
    setData(theGrid.cells, 0, '12:00,Walker,Morning Show,Morning Show,Sport,Weather,N/A,N/A'.split(','));
    setData(theGrid.cells, 1, '13:00,Today Show,Today Show,Sesame Street,Football,Market Watch,N/A,N/A'.split(','));
    setData(theGrid.cells, 2, '14:00,Today Show,Today Show,Kid Zone,Football,Soap Opera,N/A,N/A'.split(','));
    setData(theGrid.cells, 3, '15:00,News,News,News,News,News,N/A,N/A'.split(','));
    setData(theGrid.cells, 4, '16:00,News,News,News,News,News,N/A,N/A'.split(','));
});
 
function setData(p, r, cells) {
    if (p.cellType == wijmo.grid.CellType.Cell) {
        p.grid.rowHeaders.setCellData(r, 0, cells[0]);
    }
    for (var i = 1; i < cells.length; i++) {
        p.setCellData(r, i - 1, cells[i]);
    }
}
 
function centerCell(s, e) {
    if (e.cell.children.length == 0) {
        e.cell.innerHTML = '<div>' + e.cell.innerHTML + '</div>';
        wijmo.setCss(e.cell, {
            display: 'table',
            tableLayout: 'fixed'
        });
        wijmo.setCss(e.cell.children[0], {
            display: 'table-cell',
            textAlign: 'center',
            verticalAlign: 'middle'
        });
    }
}
 
// CustomMergeManager class (transpiled from TypeScript)
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var wijmo;
(function (wijmo) {
    var grid;
    (function (grid) {
        'use strict';
        /**
         * Class that extends the standard MergeManager to support merged ranges that
         * span both rows and columns.
         *
         * This class uses the same content-based approach used by the built-in merge
         * manager, but it could use any other logic instead (for example, a fixed list
         * of pre-defined merged ranges).
         */
        var CustomMergeManager = (function (_super) {
            __extends(CustomMergeManager, _super);
            function CustomMergeManager() {
                _super.apply(this, arguments);
            }
            CustomMergeManager.prototype.getMergedRange = function (panel, r, c, clip) {
                if (clip === void 0) { clip = true; }
                // create basic cell range
                var rg = new grid.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;
            };
            return CustomMergeManager;
        }(grid.MergeManager));
        grid.CustomMergeManager = CustomMergeManager;
    })(grid = wijmo.grid || (wijmo.grid = {}));
})(wijmo || (wijmo = {}));
//# sourceMappingURL=CustomMergeManager.js.map

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: CustomMerging
        public ActionResult CustomMerging()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1FlexGrid.CustomMerging_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.CustomMerging_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.CustomMerging_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.CustomMerging_Text3)
</p>
@Html.C1().FlexGrid().Id("theGrid")
 
<p>
    @Html.Raw(Resources.C1FlexGrid.CustomMerging_Text4)
</p>