@model IEnumerable<FlexGridData.Sale>

<h1>
    Grouping
</h1>
<p>
    FlexGrid supports grouping via source <b>CollectionView</b>.
</p>
<p>
    Group the data by one or more properties by adding <b>GroupDescription</b>
    objects to the grid's <b>collectionView.groupDescriptions</b>.
</p>
<p>
    The grid below groups the data by country and by product:
</p>
@Html.C1().FlexGrid().Id("theGrid").Bind(Model).OrderBy("Country", "Product").Height(250)

<p>
    You may also want to hide the columns that are being grouped
    on in order to avoid showing redundant data.
</p>
<p>
    The grid below groups the data by country and product, and
    hides those columns to achieve a compact grid.
</p>
@(Html.C1().FlexGrid().Id("theGridHideCols").Height(250)
    .AutoGenerateColumns(false)
    .Bind(Model)
    .Columns(cs=>
    {
        cs.Add().Binding("Country").Header("Country");
        cs.Add().Binding("Product").Header("Product");
        cs.Add().Binding("Downloads").Header("Downloads");
        cs.Add().Binding("Sales").Header("Sales");
        cs.Add().Binding("Expenses").Header("Expenses");
    })
    .OrderBy("Country", "Product")
)