Restricted Merging

By default, FlexGrid merges cells that have the same content, regardless of the content of neighboring cells.

In this example, we use a custom merge manager that merges cells vertically only if the cells in the previous column contain the same value.

Counrty

Customer

Downloads

Sales

Expenses

Germany

Paul Smith

111,632

20,603.32

27,944.24

169,610

99,190.22

1,631.26

Greece

Paul Smith

6,073

86,237.02

49,767.35

197,708

64,269.75

38,148.18

Italy

Paul Smith

126,531

46,951.19

49,107.56

37,424

45,332.72

14,858.59

Japan

Susan Johnson

54,740

29,190.63

23,365.74

137,524

54,681.54

4,055.50

Susan Johnson

181,205

44,217.79

48,877.49

139,988

52,628.41

46,700.93

Susan Johnson

145,248

81,732.54

38,401.13

135,436

31,459.18

40,845.40

// This file locates: "Scripts/Lesson/C1FlexGrid/RestrictedMerging.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
 
    // create some random data
    var customers = 'Paul Smith,Susan Johnson'.split(',');
    var items = theGrid.collectionView.items;
    for (var i = 0; i < items.length; i++) {
        items[i].Customer = i < items.length / 2 ? customers[0] : customers[1];
    }
 
    // apply the custom merge manager
    theGrid.mergeManager = new wijmo.grid.RestrictedMergeManager(theGrid);
});
 
// RestrictedMergeManager 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';
        var RestrictedMergeManager = (function (_super) {
            __extends(RestrictedMergeManager, _super);
            function RestrictedMergeManager() {
                _super.apply(this, arguments);
            }
            // get a "restricted" merge range
            // this range will not span rows that contain multiple values in the
            // previous column.
            RestrictedMergeManager.prototype.getMergedRange = function (p, r, c, clip) {
                if (clip === void 0) { clip = true; }
                var rng = null;
                // start with single cell
                rng = new grid.CellRange(r, c);
                var pcol = c > 0 ? c - 1 : c;
                // get reference values to use for merging
                var val = p.getCellData(r, c, false);
                var pval = p.getCellData(r, pcol, false);
                // expand up
                while (rng.row > 0 &&
                    p.getCellData(rng.row - 1, c, false) == val &&
                    p.getCellData(rng.row - 1, pcol, false) == pval) {
                    rng.row--;
                }
                // expand down
                while (rng.row2 < p.rows.length - 1 &&
                    p.getCellData(rng.row2 + 1, c, false) == val &&
                    p.getCellData(rng.row2 + 1, pcol, false) == pval) {
                    rng.row2++;
                }
                // don't bother with single-cell ranges
                if (rng.isSingleCell) {
                    rng = null;
                }
                // done
                return rng;
            };
            return RestrictedMergeManager;
        }(grid.MergeManager));
        grid.RestrictedMergeManager = RestrictedMergeManager;
    })(grid = wijmo.grid || (wijmo.grid = {}));
})(wijmo || (wijmo = {}));
//# sourceMappingURL=RestrictedMergeManager.js.map

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

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.RestrictedMerging_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.RestrictedMerging_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.RestrictedMerging_Text2)
</p>
@(Html.C1().FlexGrid().Id("theGrid").Height(300)
    .AllowMerging(C1.Web.Mvc.Grid.AllowMerging.Cells)
    .AutoGenerateColumns(false)
    .ShowAlternatingRows(false)
    .Bind(Model)
    .Columns(cs=>
    {
        cs.Add().Binding("Country").Header("Counrty").AllowMerging(true);
        cs.Add().Binding("Customer").Header("Customer").AllowMerging(true);
        cs.Add().Binding("Downloads").Header("Downloads");
        cs.Add().Binding("Sales").Header("Sales");
        cs.Add().Binding("Expenses").Header("Expenses");
    })
    .OrderBy("Country", "Customer")
)