@model IEnumerable<FlexGridData.Sale>

<h1>
    CollectionView Change Tracking
</h1>
<p>
    Web applications often use a pattern of downloading
    some data from the server, making changes locally,
    and updating the server with the changes later.
</p>
<p>
    The <b>CollectionView</b> can help by keeping track
    of items that have been added, removed, or modified.
</p>
<p>
    To use this feature, set the
    <a href="http://helpcentral.componentone.com/nethelp/c1mvchelpers/wijmo.collections.CollectionView.Class.html#trackChanges" target="_blank">trackChanges</a>
    property to true. Once you do that, the <b>CollectionView</b>
    will add items to its <b>itemsAdded</b>, <b>itemsRemoved</b>,
    and <b>itemsEdited</b> collections. When you are ready, send
    the changes to the server and call the <b>clearChanges</b>
    method to reset the change-tracking collections.
</p>
<p>
    Edit/add/remove items in the grid below to observe how it works:
</p>

@(Html.C1().FlexGrid().Id("theGrid")
    .AllowAddNew(true)
    .AllowDelete(true)
    .Bind(b=>b.Bind(Model).DisableServerRead(true))
    .OrderBy("Country")
    .AutoGenerateColumns(false)
    .Columns(cs =>
    {
        cs.Add().Binding("Country").Header("Country");
        cs.Add().Binding("Downloads").Header("Downloads");
        cs.Add().Binding("Sales").Header("Sales");
        cs.Add().Binding("Expenses").Header("Expenses");
    })
)

<h3>Edited Items:</h3>
@(Html.C1().FlexGrid().Id("edited")
    .CssClass("changed edited")
    .IsReadOnly(true)
    .AutoGenerateColumns(false)
    .Columns(cs =>
    {
        cs.Add().Binding("Country").Header("Country");
        cs.Add().Binding("Downloads").Header("Downloads");
        cs.Add().Binding("Sales").Header("Sales");
        cs.Add().Binding("Expenses").Header("Expenses");
    })
)

<h3>Added Items:</h3>
@(Html.C1().FlexGrid().Id("added")
    .CssClass("changed added")
    .IsReadOnly(true)
    .AutoGenerateColumns(false)
    .Columns(cs =>
    {
        cs.Add().Binding("Country").Header("Country");
        cs.Add().Binding("Downloads").Header("Downloads");
        cs.Add().Binding("Sales").Header("Sales");
        cs.Add().Binding("Expenses").Header("Expenses");
    })
)

<h3>Removed Items:</h3>
@(Html.C1().FlexGrid().Id("removed")
    .CssClass("changed removed")
    .IsReadOnly(true)
    .AutoGenerateColumns(false)
    .Columns(cs =>
    {
        cs.Add().Binding("Country").Header("Country");
        cs.Add().Binding("Downloads").Header("Downloads");
        cs.Add().Binding("Sales").Header("Sales");
        cs.Add().Binding("Expenses").Header("Expenses");
    })
)