Header Merging

FlexGrid supports content-driven cell merging in column header cells.

// This file locates: "Scripts/Lesson/C1FlexGrid/HeaderMerging.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.allowMerging = 'ColumnHeaders';
 
    // create extra header row
    var extraRow = new wijmo.grid.Row();
    extraRow.allowMerging = true;
 
    // add extra header row to the grid
    var panel = theGrid.columnHeaders;
    panel.rows.splice(0, 0, extraRow);
 
    // populate the extra header row
    for (col = 1; col <= 2; col++) {
        panel.setCellData(0, col, 'Amounts');
    }
 
    // merge "Country" and "Active" headers vertically
    ['Country', 'Active'].forEach(function (binding) {
        col = theGrid.getColumn(binding);
        col.allowMerging = true;
        panel.setCellData(0, col.index, col.header);
    });
 
    // center-align merged header cells
    theGrid.formatItem.addHandler(function (s, e) {
        if (e.panel == s.columnHeaders && e.range.rowSpan > 1) {
            var html = e.cell.innerHTML;
            e.cell.innerHTML = '<div class="v-center">' + html + '</div>';
        }
    });
});

// This file locates: "Content/css/Lesson/C1FlexGrid/HeaderMerging.css".
.wj-cell .v-center {
  position: relative;
  top: 50%;
    transform: translateY(-50%);
  white-space: pre-wrap;
}

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

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.HeaderMerging_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.HeaderMerging_Text1)
</p>
 
@(Html.C1().FlexGrid().Id("theGrid").Height(200)
    .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");
    })
)