Cell Merging

FlexGrid supports content-driven cell merging.

To enable cell merging, set the allowMerging property to indicate what part or parts of the grid you want to merge, and set the allowMerging property on specific rows and columns to true. Once you do that, the grid will merges cells that have the same content, grouping the data visually.

In the example below, the allowMerging property is set to true on the "Country" and "Active" columns.

Try sorting the grid to see how that affects merging.

Country

Sales

Expenses

Active

Germany

86,237.02

49,767.35

20,603.32

27,944.24

54,681.54

4,055.50

50,512.92

35,798.63

61,983.03

24,398.40

Japan

33,716.03

22,860.44

29,190.63

23,365.74

99,190.22

1,631.26

64,269.75

38,148.18

85,821.92

33,987.45

Notice how cells with the same content are merged down the columns, regardless of the content of other cells. You can customize this behavior using the mergeManager property.

// This file locates: "Scripts/Lesson/C1FlexGrid/CellMerging.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.allowMerging = 'Cells';
    theGrid.getColumn('Country').allowMerging = true;
    theGrid.getColumn('Active').allowMerging = true;
});

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

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.CellMerging_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.CellMerging_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.CellMerging_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.CellMerging_Text3)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.CellMerging_Text4)
</p>
@(Html.C1().FlexGrid().Id("theGrid").Height(200)
    .IsReadOnly(true)
    .ShowAlternatingRows(false)
    .Bind(Model)
    .AutoGenerateColumns(false)
    .Columns(cs=>
    {
        cs.Add().Binding("Country").Header("Country");
        cs.Add().Binding("Sales").Header("Sales").Format("n2");
        cs.Add().Binding("Expenses").Header("Expenses").Format("n2");
        cs.Add().Binding("Active").Header("Active");
    })
    .OrderBy("Country", "Active")
)
 
<p>
    @Html.Raw(Resources.C1FlexGrid.CellMerging_Text5)
</p>