@model IEnumerable<FlexGridData.Sale>

<h1>
    FlexGrid Architecture
</h1>
<p>
    FlexGrid displays data in a tabular form and allows
    users to edit it or modify the views by sorting,
    filtering, and grouping it.
</p>
<p>
    Like all other CMVC controls, the grid delegates all
    data-related tasks to the
    <a href="http://helpcentral.componentone.com/nethelp/c1mvchelpers/wijmo.collections.CollectionView.Class.html" target="_blank">CollectionView</a>
    class.
</p>
<p>
    When you set the <b>itemsSource</b> property of grid to an array,
    or
    <a href="http://helpcentral.componentone.com/nethelp/c1mvchelpers/wijmo.collections.ObservableArray.Class.html" target="_blank">ObservableArray</a>,
    the grid automatically creates a CollectionView instance
    to wrap the original array. This CollectionView can be 
    accessed through the <b>collectionView</b> property. 
</p>
<p>
    For example, the grids below are bound to the same data array.
    Each one has its own internal CollectionView, so they can be sorted,
    filtered, and grouped independently. The current item
    (associated with the grid selection) is also independent:
</p>
<div class="row demo-settings">
    <div class="col-xs-6">
        @Html.C1().FlexGrid().Id("gridArray1")
    </div>
    <div class="col-xs-6">
        @Html.C1().FlexGrid().Id("gridArray2")
    </div>
</div>

<p>
    By contrast, the two grids below are bound to the same CollectionView.
    Because of this, they show the same view. Sorting, filtering, or
    selecting on one grid affects the other.
</p>
<div class="row demo-settings">
    <div class="col-xs-6">
        @Html.C1().FlexGrid().Id("gridCv1")
    </div>
    <div class="col-xs-6">
        @Html.C1().FlexGrid().Id("gridCv2")
    </div>
</div>

<p>
    Observe how sorting, filtering, and selection applied
    to the common view is also reflected on other
    controls such as <b>ListBox</b>:
</p>
@Html.C1().ListBox().Id("listBox")