@model IEnumerable<FlexGridData.Sale>

<h1>
    Cells
</h1>
<p>
    The FlexGrid module defines <b>Row</b> and <b>Column</b>
    classes, but no <b>Cell</b> class. That is because cells
    are just DOM elements created to represent the intersection
    of a <b>Row</b> and a <b>Column</b>.
</p>
<p>
    When rendering, FlexGrid scans the rows and columns in
    the <b>viewRange</b> and generates a cell element for
    each combination. Cell elements are created based on a
    <b>dataItem</b> provided by the row and a <b>binding</b>
    provided by the column (along with some other properties).
</p>

<h2>
    The formatItem event
</h2>
<p>
    In some situations, you may want to customize the cell
    element based on the data (dynamic formatting), to create
    custom cell elements (templating), or not to use bindings
    at all (calculated columns, unbound grids).
</p>
<p>
    In these cases, use the <b>formatItem</b> event to create or
    modify the cell elements. For example, the
    grid below shows sales below 1,000 in red and sales
    over 5,000 in green:
</p>

@Html.C1().FlexGrid().Id("theGrid").Bind(Model).Height(250)

<h2>
    Getting and setting cell data
</h2>
<p>
    In most of the cases, you modify the data directly in the
    binding source object, and let the grid show the results.
    But in a few cases, you may want to get or set the
    data through the grid instead.
</p>
<p>
    You can do this using the <b>getCellData</b> and
    <b>setCellData</b> methods in the <b>GridPanel</b>
    class. These methods offer options for getting raw
    or formatted data, coercing data types when setting
    data, and getting or setting data on unbound grids.
</p>
<p>
    <button id="getCellData" class="btn btn-default">
        Get the data for the currently selected cell
    </button>
</p>    