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
UK
Susan Johnson
181,205
44,217.79
48,877.49
139,988
52,628.41
46,700.93
US
Susan Johnson
145,248
81,732.54
38,401.13
135,436
31,459.18
40,845.40
Counrty
Customer
Downloads
Sales
Expenses
0
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | // 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 |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1FlexGridController : Controller { // GET: RestrictedMerging public ActionResult RestrictedMerging() { return View(Models.FlexGridData.GetSales(12)); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | @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" ) ) |