@model IEnumerable<FlexGridData.Sale>

<h1>
    Column Collections
</h1>
<p>
    The FlexGrid control has two sets of columns:
</p>
<ul>
    <li>
        <b>Fixed Columns</b>
        This collection contains the columns on the left
        of the grid. It is used by the <b>topLeftCells</b>
        and <b>rowHeaders</b> panels.
        By default, this collection contains only one column.
    </li>
    <li>
        <b>Scrollable Columns</b>
        This collection contains the main set of columns.
        It is used by the <b>cells</b>, <b>columnHeaders</b>,
        and <b>columnFooters</b> panels.
    </li>
</ul>

<p>
    Both of these collections are objects of <b>ColumnCollection</b>
    class, which extend regular arrays.
    You may add or remove columns by adding or removing
    <b>Column</b> objects from these arrays.
</p>

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

<p>
    For example, the grid below has an extra fixed column and
    automatically-generated scrollable columns:
</p>
@Html.C1().FlexGrid().Id("theFirstGrid").Height(150)

<p>
    And this grid has no fixed columns and a custom set of
    scrollable columns:
</p>
@Html.C1().FlexGrid().Id("theSecondGrid").Height(150)