@model IEnumerable<FlexGridData.Sale>

<h1>
    Grid Panels
</h1>
<p>
    The FlexGrid control is made up of six
    <a href="http://helpcentral.componentone.com/nethelp/c1mvchelpers/wijmo.grid.GridPanel.Class.html" target="_blank">GridPanel</a>
    elements:
</p>
<ul>
    <li>
        <b>topLeftCells</b>:
        Panel on the left of the column headers, typically containing
        a single empty cell that can be clicked to select the whole grid
        content. This panel does not scroll.
    </li>
    <li>
        <b>columnHeaders</b>:
        Panel above the data cells, typically containing a single row
        with cells that can be clicked to sort the grid or dragged
        to resize or re-arrange the columns. This panel scrolls
        horizontally.
    </li>
    <li>
        <b>rowHeaders</b>:
        Panel on the left of the data cells, typically containing a
        single column that can be clicked to select rows and that
        displays icons for rows being edited or added. This panel
        scrolls vertically.
    </li>
    <li>
        <b>cells</b>:
        Panel that contains the data cells. Users can select cells
        by clicking and dragging on this panel or by using the
        keyboard. This panel scrolls horizontally and vertically.
    </li>
    <li>
        <b>bottomLeftCells:</b>
        Panel to the left of the column footers. By default, this
        panel contains no rows and therefore is not visible.
    </li>
    <li>
        <b>columnFooters</b>:
        Panel below the data cells, typically used to show column
        summary information. By default, this panel contains no
        rows and therefore is not visible.
    </li>
</ul>
<p>
    Although these panels are synchronized so that they remain aligned with
    each other when the grid scrolls, each one has its own set of 
    properties that can be used to customize the specific areas of the grid.
</p>
<p>
    Move the mouse over the grid below to see each panel and
    hit-test information of the cell being hovered:
</p>
@(Html.C1().FlexGrid().Id("theGrid").Height(200)
    .ShowAlternatingRows(false)
    .AutoGenerateColumns(false)
    .Bind(Model)
    .Columns(cs=>
    {
        cs.Add().Binding("Id").Header("ID");
        cs.Add().Binding("Country").Header("Country");
        cs.Add().Binding("Active").Header("Active").Aggregate(C1.Web.Mvc.Grid.Aggregate.Sum);
        cs.Add().Binding("Downloads").Header("Downloads (K)").Format("n0").Aggregate(C1.Web.Mvc.Grid.Aggregate.Sum);
        cs.Add().Binding("Sales").Header("Sales (K)").Aggregate(C1.Web.Mvc.Grid.Aggregate.Sum);
        cs.Add().Binding("Expenses").Header("Expenses (K)").Aggregate(C1.Web.Mvc.Grid.Aggregate.Sum);
    })
)

<p>
    Notice the <b>columnFooters</b> panel at the bottom of the grid.
    This panel is empty by default, but we have added a <b>GroupRow</b>
    to the same. The <b>GroupRow</b> automatically shows aggregate 
    values for each cell calculated based on the value of the column's 
    <b>aggregate</b> property, which in this example is set to 'Sum'.
</p>

<p>
    You can use the <b>headersVisibility</b> property to select
    which header panels should be visible:
</p>
@(Html.C1().ComboBox().Id("headersVisibility")
    .Bind(new[] { "None", "Row", "Column", "All" })
    .Text("All")
)
