@model IEnumerable<FlexGridData.Sale>

<h1>
    Cell Merging
</h1>
<p>
    FlexGrid supports content-driven cell merging.
</p>
<p>
    To enable cell merging, set the <b>allowMerging</b> property to
    indicate what part or parts of the grid you want to merge, and
    set the <b>allowMerging</b> 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.
</p>
<p>
    In the example below, the <b>allowMerging</b> property is set to
    true on the "Country" and "Active" columns.
</p>
<p>
    Try sorting the grid to see how that affects merging.
</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>
    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 <b>mergeManager</b>
    property.
</p>