CollectionView Change Tracking

Web applications often use a pattern of downloading some data from the server, making changes locally, and updating the server with the changes later.

The CollectionView can help by keeping track of items that have been added, removed, or modified.

To use this feature, set the trackChanges property to true. Once you do that, the CollectionView will add items to its itemsAdded, itemsRemoved, and itemsEdited collections. When you are ready, send the changes to the server and call the clearChanges method to reset the change-tracking collections.

Edit/add/remove items in the grid below to observe how it works:

Country

Downloads

Sales

Expenses

Germany

111,632

20,603.32

27,944.24

Greece

6,073

86,237.02

49,767.35

Italy

126,531

46,951.19

49,107.56

Japan

54,740

29,190.63

23,365.74

181,205

44,217.79

48,877.49

145,248

81,732.54

38,401.13

Edited Items:

Country

Downloads

Sales

Expenses

Added Items:

Country

Downloads

Sales

Expenses

Removed Items:

Country

Downloads

Sales

Expenses

// This file locates: "Scripts/Lesson/C1Mvc/CVTrackingChanges.js".
c1.documentReady(function () {
    // grid for editing
    var theGrid = wijmo.Control.getControl('#theGrid');
    var view = theGrid.collectionView;
    view.trackChanges = true;
 
    // grids to show changes
    var edited = wijmo.Control.getControl('#edited');
    edited.itemsSource = view.itemsEdited;
    var added = wijmo.Control.getControl('#added');
    added.itemsSource = view.itemsAdded;
    var removed = wijmo.Control.getControl('#removed');
    removed.itemsSource = view.itemsRemoved;
});

// This file locates: "Content/css/Lesson/C1Mvc/CVTrackingChanges.css".
.changed {
  font-size: 90%;
  background-color: #f0f0f0
}
.edited {
  color: orange  
}
.added {
  color: green
}
.removed {
  color: red
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1MvcController : Controller
    {
        // GET: CVTrackingChanges
        public ActionResult CVTrackingChanges()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1Mvc.CVTrackingChanges_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Mvc.CVTrackingChanges_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVTrackingChanges_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVTrackingChanges_Text3)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVTrackingChanges_Text4)
</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>@Html.Raw(Resources.C1Mvc.CVTrackingChanges_Title1)</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>@Html.Raw(Resources.C1Mvc.CVTrackingChanges_Title2)</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>@Html.Raw(Resources.C1Mvc.CVTrackingChanges_Title3)</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");
    })
)