@model IEnumerable<FlexGridData.Sale>

<h1>
    Aggregates
</h1>
<p>
    FlexGrid columns have an <b>aggregate</b> property that
    allows you to show data summaries for the whole grid or
    for each group.
</p>
<p>
    To show group aggregates, set the <b>aggregate</b> property
    on the columns that you want to aggregate, and create groups
    by dragging the column headers into the group panel above
    the grid.
</p>
<p>
    Notice how the group rows contain the sum of the 'Sales' and
    'Expenses' columns for each group. The aggregates are
    updated automatically when you edit the data.
</p>
@(Html.C1().FlexGrid<FlexGridData.Sale>().Id("theGrid").Height(250)
    .AutoGenerateColumns(false)
    .Bind(Model)
    .Columns(cs=>
    {
        cs.Add().Binding("Id").Header("ID").Width("60").IsReadOnly(true);
        cs.Add().Binding("Country").Header("Country");
        cs.Add().Binding("Product").Header("Product");
        cs.Add().Binding("Sales").Header("Sales");
        cs.Add().Binding("Expenses").Header("Expenses");
    })
    .ShowGroupPanel(p=>p.Placeholder("Drag columns here to create groups"))
)