@model IEnumerable<FlexGridData.Sale>

<h1>
    Binding
</h1>
<p>
    In most scenarios, the FlexGrid shows data that is loaded from a
    server or generated in code. This data is represented as an
    array of objects, and the grid is bound to this array via
    its <b>itemsSource</b> property.
</p>

@Html.C1().CollectionViewService().Id("collectionView").Bind(Model)

<p>
    By default, when you set the <b>itemsSource</b> property
    the grid will scan the data objects and automatically
    generate columns for each property in the data items.
    For example:
</p>
@Html.C1().FlexGrid().Id("theGridAutoGen").ShowAlternatingRows(false).Height(200)

<p>
    Auto-generating columns works well for simple data sources
    or while testing/developing applications. But in most scenarios,
    you will want to turn off the automatic column generation and
    specify the columns in code. This way you get complete control
    over which columns are displayed, in what order, their widths,
    format, headers, etc.
<p>
<p>
    Each column has a <b>binding</b> property that determines which
    property of the data item that should be displayed in the cell.
    For example:
</p>
@Html.C1().FlexGrid().Id("theGridExplicitCols").ShowAlternatingRows(false).Height(200)