ComponentOne's MVC Edition CollectionView is a service that implements the ICollectionView interface to display data in data-bound controls, such as FlexGrid.
The server side CollectionViewHelper is a service that enables collections to have reading, editing, filtering, grouping and sorting ability,
this is similar to .Net CollectionView. CollectionView internally handles sorting, paging, filtering requests by data bound controls on the server
unless it is explicitly specified to perform these operation at client-side.
This section describes how to use Create, Read, Update, Delete and BatchEdit actions for CRUD operations.
It also demonstrates the DisableServerRead functionality of the ItemSource, this is used to perform actions explicitly at client side.
Getting Started
Steps for getting started with the CollectionView in MVC applications:
Create a new MVC project using the C1 ASP.NET MVC application template.
Add model to the project. This example uses Entity Framework with Northwind database
Add controller and corresponding view to the project.
Create Read and Create Actions in the controller.
Add a control in the view to display data. This example uses FlexGrid.
Bind the FlexGrid using its Bind property to display data.
The Bind property is of type ItemSource which can take a Model or Action URL to fetch data.
This creates a FlexGrid with AJAX binding, the data for FlexGrid is internally wrapped in a CollectionView which has capability to sort, group,
filter and page data. The GridReadCategory action of controller is assigned to Bind property of FlexGrid' ItemSource to populate data.
This example is using Create property of FlexGrid's ItemSource to assign GridCreateCategory action of controller, this allows adding record
to source database by handling Edit request of CollectionViewHelper.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using CollectionView101.Models;
using C1.Web.Mvc.Grid;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using System.Data.Entity.Validation;
using System.Data.Entity;
namespace CollectionView101.Controllers
{
public class HomeController : Controller
{
private C1NWindEntities db = new C1NWindEntities();
public ActionResult GridReadCategory([C1JsonRequest] CollectionViewRequest requestData)
{
return this.C1Json(CollectionViewHelper.Read(requestData, db.Categories));
}
public ActionResult GridCreateCategory([C1JsonRequest]CollectionViewEditRequest requestData)
{
var category = requestData.OperatingItems.First();
if (category.CategoryName == null)
{
category.CategoryName = "";
}
return Create(requestData, db.Categories);
}
public ActionResult GridUpdateCategory([C1JsonRequest]CollectionViewEditRequest requestData)
{
return Update(requestData, db.Categories);
}
private ActionResult Update(CollectionViewEditRequest requestData, DbSet data) where T : class
{
return this.C1Json(CollectionViewHelper.Edit(requestData, item =>
{
string error = string.Empty;
bool success = true;
try
{
db.Entry(item as object).State = EntityState.Modified;
db.SaveChanges();
}
catch (DbEntityValidationException e)
{
error = string.Join(",", e.EntityValidationErrors.Select(result =>
{
return string.Join(",", result.ValidationErrors.Select(err => err.ErrorMessage));
}));
success = false;
}
catch (Exception e)
{
error = e.Message;
success = false;
}
return new CollectionViewItemResult
{
Error = error,
Success = success && ModelState.IsValid,
Data = item
};
}, () => data.ToList()));
}
private ActionResult Create(CollectionViewEditRequest requestData, DbSet data) where T : class
{
return this.C1Json(CollectionViewHelper.Edit(requestData, item =>
{
string error = string.Empty;
bool success = true;
try
{
data.Add(item);
db.SaveChanges();
}
catch (DbEntityValidationException e)
{
error = string.Join(",", e.EntityValidationErrors.Select(result =>
{
return string.Join(",", result.ValidationErrors.Select(err => err.ErrorMessage));
}));
success = false;
}
catch (Exception e)
{
error = e.Message;
success = false;
}
return new CollectionViewItemResult
{
Error = error,
Success = success && ModelState.IsValid,
Data = item
};
}, () => data.ToList()));
}
}
}
Result (live):
CategoryID
CategoryName
Description
1
Beveragess
Soft drinks, coffees, teas, beers, and ales
2
Condiments
Sweet and savory sauces, relishes, spreads, and seasonings
3
Confections
Desserts, candies, and sweet breads
4
Dairy Products
Cheeses
5
Grains/Cereals
Breads, crackers, pasta, and cereal
7
Produce
n b
10
dgr
tgrtg
11
wrtg
tg
12
hbhjbhjb
dghkdghmfd
13
534djdfgjfgj
fjfgajajsdg
14
dfgjdfjdfjg
dfjfskfsdkdfhkdf
CategoryID
CategoryName
Description
0
loading...
Update
The server side CollectionViewHelper class defines a Edit request to handle updates.
This example shows how to define update action which enables updating record in source database by handling Edit request of CollectionViewHelper. In Flexgrid, the Update action is assigned to the Update property of ItemSource.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using CollectionView101.Models;
using C1.Web.Mvc.Grid;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using System.Data.Entity.Validation;
using System.Data.Entity;
namespace CollectionView101.Controllers
{
public class HomeController : Controller
{
private C1NWindEntities db = new C1NWindEntities();
public ActionResult GridUpdateCategory([C1JsonRequest]CollectionViewEditRequest
requestData)
{
return Update(requestData, db.Categories);
}
private ActionResult Update
(CollectionViewEditRequest
requestData, DbSet
data) where T : class
{
return this.C1Json(CollectionViewHelper.Edit
(requestData, item =>
{
string error = string.Empty;
bool success = true;
try
{
db.Entry(item as object).State = EntityState.Modified;
db.SaveChanges();
}
catch (DbEntityValidationException e)
{
error = string.Join(",", e.EntityValidationErrors.Select(result =>
{
return string.Join(",", result.ValidationErrors.Select(err => err.ErrorMessage));
}));
success = false;
}
catch (Exception e)
{
error = e.Message;
success = false;
}
return new CollectionViewItemResult
{
Error = error,
Success = success && ModelState.IsValid,
Data = item
};
}, () => data.ToList
()));
}
// GET: Home
public ActionResult Index()
{
return View(db);
}
}
}
HResult -2146232828 int
Result (live):
CategoryID
CategoryName
Description
1
Beveragess
Soft drinks, coffees, teas, beers, and ales
2
Condiments
Sweet and savory sauces, relishes, spreads, and seasonings
3
Confections
Desserts, candies, and sweet breads
4
Dairy Products
Cheeses
5
Grains/Cereals
Breads, crackers, pasta, and cereal
7
Produce
n b
10
dgr
tgrtg
11
wrtg
tg
12
hbhjbhjb
dghkdghmfd
13
534djdfgjfgj
fjfgajajsdg
14
dfgjdfjdfjg
dfjfskfsdkdfhkdf
CategoryID
CategoryName
Description
0
Delete
This example shows how to define action in controller to delete rows from database by handling Edit request of CollectionViewHelper. In FlexGrid this action is assigned to the Delete property of ItemSource.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using CollectionView101.Models;
using C1.Web.Mvc.Grid;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using System.Data.Entity.Validation;
using System.Data.Entity;
namespace CollectionView101.Controllers
{
public class HomeController : Controller
{
private C1NWindEntities db = new C1NWindEntities();
public ActionResult GridDeleteCategory([C1JsonRequest]CollectionViewEditRequest requestData)
{
return Delete(requestData, db.Categories, item => item.CategoryID);
}
private ActionResult Delete(CollectionViewEditRequest requestData, DbSet data, Func getKey) where T : class
{
return this.C1Json(CollectionViewHelper.Edit(requestData, item =>
{
string error = string.Empty;
bool success = true;
try
{
var resultItem = data.Find(getKey(item));
data.Remove(resultItem);
db.SaveChanges();
}
catch (DbEntityValidationException e)
{
error = string.Join(",", e.EntityValidationErrors.Select(result =>
{
return string.Join(",", result.ValidationErrors.Select(err => err.ErrorMessage));
}));
success = false;
}
catch (Exception e)
{
error = e.Message;
success = false;
}
return new CollectionViewItemResult
{
Error = error,
Success = success && ModelState.IsValid,
Data = item
};
}, () => data.ToList()));
}
// GET: Home
public ActionResult Index()
{
return View(db);
}
}
}
Result (live):
CategoryID
CategoryName
Description
1
Beveragess
Soft drinks, coffees, teas, beers, and ales
2
Condiments
Sweet and savory sauces, relishes, spreads, and seasonings
3
Confections
Desserts, candies, and sweet breads
4
Dairy Products
Cheeses
5
Grains/Cereals
Breads, crackers, pasta, and cereal
7
Produce
n b
10
dgr
tgrtg
11
wrtg
tg
12
hbhjbhjb
dghkdghmfd
13
534djdfgjfgj
fjfgajajsdg
14
dfgjdfjdfjg
dfjfskfsdkdfhkdf
CategoryID
CategoryName
Description
0
BatchEditing
This example shows how to define batch edit action in controller to update database with collection view. BatchEdit allows to submit multiple changes back to database.
This is accomplised by handling BatchEdit request of CollectionViewHelper. In FlexGrid, the BatchEdit action is assigned to BatchEdit property of ItemsSource.
Note: Ensure that DisableServerRead property of databound control's ItemSource is set to true when performing BatchEdit. This stops filtering, paging and sorting operations from sending an update request to the server,
which will automatically updates the data in source database. These operations should be done at client side incase of BatchEditing otherwise modified data will also be submitted when user sorts, filters or performs paging.
//Batch Edit
function batchUpdate() {
var batchEditGrid = wijmo.Control.getControl('#fGBECView'),
cv = batchEditGrid.collectionView;
cv.commit();
};
using CollectionView101.Models;
using C1.Web.Mvc.Grid;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using System.Data.Entity.Validation;
using System.Data.Entity;
namespace CollectionView101.Controllers
{
public class HomeController : Controller
{
private C1NWindEntities db = new C1NWindEntities();
public ActionResult GridBatchEdit([C1JsonRequest]CollectionViewBatchEditRequest requestData)
{
return this.C1Json(CollectionViewHelper.BatchEdit(requestData, batchData =>
{
var itemresults = new List>();
string error = string.Empty;
bool success = true;
try
{
if (batchData.ItemsCreated != null)
{
batchData.ItemsCreated.ToList().ForEach(st =>
{
db.Categories.Add(st);
itemresults.Add(new CollectionViewItemResult
{
Error = "",
Success = ModelState.IsValid,
Data = st
});
});
}
if (batchData.ItemsDeleted != null)
{
batchData.ItemsDeleted.ToList().ForEach(category =>
{
var fCategory = db.Categories.Find(category.CategoryID);
db.Categories.Remove(fCategory);
itemresults.Add(new CollectionViewItemResult
{
Error = "",
Success = ModelState.IsValid,
Data = category
});
});
}
if (batchData.ItemsUpdated != null)
{
batchData.ItemsUpdated.ToList().ForEach(category =>
{
db.Entry(category).State = EntityState.Modified;
itemresults.Add(new CollectionViewItemResult
{
Error = "",
Success = ModelState.IsValid,
Data = category
});
});
}
db.SaveChanges();
}
catch (DbEntityValidationException e)
{
error = string.Join(",", e.EntityValidationErrors.SelectMany(i => i.ValidationErrors).Select(i => i.ErrorMessage));
success = false;
}
catch (Exception e)
{
error = e.Message;
success = false;
}
return new CollectionViewResponse
{
Error = error,
Success = success,
OperatedItemResults = itemresults
};
}, () => db.Categories.ToList()));
}
// GET: Home
public ActionResult Index()
{
return View(db);
}
}
}
Result (live):
CategoryID
CategoryName
Description
1
Beveragess
Soft drinks, coffees, teas, beers, and ales
2
Condiments
Sweet and savory sauces, relishes, spreads, and seasonings
3
Confections
Desserts, candies, and sweet breads
4
Dairy Products
Cheeses
5
Grains/Cereals
Breads, crackers, pasta, and cereal
7
Produce
n b
10
dgr
tgrtg
11
wrtg
tg
12
hbhjbhjb
dghkdghmfd
13
534djdfgjfgj
fjfgajajsdg
14
dfgjdfjdfjg
dfjfskfsdkdfhkdf
CategoryID
CategoryName
Description
0
Disable Server Reading
DisableServerRead property disables server side synchronisation. When it is set to True, all the items will be transferred to the client side. Sorting, paging or filtering will be done on client side. And the text like waiting... is not shown for loading the data when the scrollbar scrolls. Otherwise, sorting, paging or filtering will be done on server side. And sometimes the waiting... text will be shown.
$(document).ready(function () {
//Disable Server Reading
fGDisableServerView = wijmo.Control.getControl('#fGDisableServerView');
});
//Disable Server Read
var fGDisableServerView = null;
using CollectionView101.Models;
using C1.Web.Mvc.Grid;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using System.Data.Entity.Validation;
using System.Data.Entity;
namespace CollectionView101.Controllers
{
public class HomeController : Controller
{
private C1NWindEntities db = new C1NWindEntities();
// GET: Home
public ActionResult Index()
{
return View(db);
}
}
}
CollectionView has a powerful client API. CollectionViewHelper internally performes server side operations like sorting, filtering, paging on data for MVC
controls like FlexGrid, FlexChart and other Input controls. However it is possible to explicitly perform these operations on client-side.
This section demonstrates following client-side operations:- Current Record Management, Sorting, Filtering, Grouping and Tracking Changes.
Note: It is important to note that the DisableServerRead property of ItemSource should be set to True if filtering, paging, sorting is to be
performed on data available at client side only. The default setting is False, with default setting: sorting, paging, filtering happen on server,
this is done by a internal callback request which is sent to the CollectionViewHelper on the server to perform the said operations.
As implementing the interface ICollectionView, CollectionView can manage the current record.
This example shows how you can manage the current record through APIs provided by the CollectionView class.
In this case, we use the properties currentPosition to obtain the current record position in the collection.
We also use the methods moveCurrentTo(item), moveCurrentToFirst(), moveCurrentToLast(), moveCurrentToNext(), moveCurrentToPosition(index) and moveCurrentToPrevious() to change the current position.
When the current is changed, we use the events currentChanging and currentChanged to track it. We can cancel the current changing in the event currentChanging.
Notes: Click the "Move To Next" button to move the current to the next one. Click the "Move to Previous" to move the current to the previous on. Clicking the "Stop in 4th Row" button will cause the current is forbidden to be changed when it locates in the 4th row. Then clicking the "Clear Stopping" button will let the current be changed freely.
<div class="row-fluid well btn-group">
<button class="btn btn-default" id="btnCRMMoveNext">Move To Next</button>
<button class="btn btn-default" id="btnCRMMovePre">Move To Previous</button>
<button class="btn btn-default" id="btnCRMStop4">Stop in 4th Row</button>
<button class="btn btn-default" id="btnCRMReset">Clear Stopping</button>
</div>
@(Html.C1().FlexGrid().Id("crmGrid").IsReadOnly(true).SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Row)
.AutoGenerateColumns(true).Bind(b=>b.DisableServerRead(true).Bind(Model.Customers))
)
$(document).ready(function () {
//Current Record Management
crmGrid = wijmo.Control.getControl('#crmGrid');
cvCRM = crmGrid.itemsSource; //new wijmo.collections.CollectionView(getData(10)),
// Add the processes for buttons' click
// move the current to the next one
document.getElementById('btnCRMMoveNext').addEventListener('click', function () {
cvCRM.moveCurrentToNext();
});
// move the current to the preivous one
document.getElementById('btnCRMMovePre').addEventListener('click', function () {
cvCRM.moveCurrentToPrevious();
});
// when the current item is the 4th one, forbid changing current.
document.getElementById('btnCRMStop4').addEventListener('click', function () {
cvCRM.currentChanging.addHandler(stopCurrentIn4th);
});
// restore to be able to change current.
document.getElementById('btnCRMReset').addEventListener('click', function () {
cvCRM.currentChanging.removeHandler(stopCurrentIn4th);
});
// define the funciton to forbid the current moving.
function stopCurrentIn4th(sender, e) {
// when the current is the 4rd item, stop moving.
if (sender.currentPosition === 3) {
e.cancel = true;
}
};
});
// create collectionview, grid
var crmGrid = null
, cvCRM = null;
using CollectionView101.Models;
using C1.Web.Mvc.Grid;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using System.Data.Entity.Validation;
using System.Data.Entity;
namespace CollectionView101.Controllers
{
public class HomeController : Controller
{
private C1NWindEntities db = new C1NWindEntities();
// GET: Home
public ActionResult Index()
{
return View(db);
}
}
}
The CollectionView class supports sorting through the ICollectionView interface, which is identical to the
one in .NET. To enable sorting, add one or more sortDescriptions objects to the
CollectionView.sortDescriptions property. Then the sorted result can be obtained from the CollectionView.items property.
SortDescription objects are flexible, allowing you to sort data based on value in ascending or descending order.
In the sample below, you can sort the collection based on the corresponding field value choosed in the first list. You can also specify the sorting order in the second list.
function getNames() {
return ['CustomerID', 'CompanyName', 'ContactName', 'City', 'Country', 'Phone'];
};
$(document).ready(function () {
//Sorting
sortingGrid = wijmo.Control.getControl('#sortingGrid');
cvSorting = sortingGrid.itemsSource;
sortingFieldNameList = document.getElementById('sortingFieldNameList');
sortingOrderList = document.getElementById('sortingOrderList');
//sortingNames = getNames();
// initialize the list items for field names and orders.
sortingFieldNameList.innerHTML += '';
for (var i = 0; i < sortingNames.length; i++) {
sortingFieldNameList.innerHTML += '';
}
// track the list change in order to udpate the sortDescriptions property.
sortingFieldNameList.addEventListener('change', sortGrid);
sortingOrderList.addEventListener('change', sortGrid);
});
//Sorting
// create collectionview, grid, the jQuery elements, the field name list.
var cvSorting = null,
sortingGrid =null,
sortingFieldNameList = null,
sortingOrderList = null,
sortingNames = getNames();
function sortGrid() {
var fieldName = sortingFieldNameList.value,
ascending = sortingOrderList.value,
sd, sdNew;
if (!fieldName) {
return;
}
ascending = ascending === 'true';
sd = cvSorting.sortDescriptions;
sdNew = new wijmo.collections.SortDescription(fieldName, ascending);
// remove any old sort descriptors and add the new one
sd.splice(0, sd.length, sdNew);
};
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using CollectionView101.Models;
using C1.Web.Mvc.Grid;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using System.Data.Entity.Validation;
using System.Data.Entity;
namespace CollectionView101.Controllers
{
public class HomeController : Controller
{
private C1NWindEntities db = new C1NWindEntities();
// GET: Home
public ActionResult Index()
{
return View(db);
}
}
}
The CollectionView class supports filtering through the ICollectionView interface, which is identical to the
one in .NET. To enable filtering, set the CollectionView.filter property to a function that
determines which objects to be included in the view. For the client side Filtering to work, the DisableServerRead property of the ItemSource should be true.
In this example, we create a filter for the country, and get the filter value from the input control. When you input the filter, the grid will be refreshed and render the fitlered data.
function getFilterNames() {
return ['ProductID', 'ProductName', 'SupplierID', 'CategoryID', 'QuantityPerUnit', 'UnitPrice', 'UnitsInStock', 'UnitsOnOrder', 'ReorderLevel'];
};
$(document).ready(function () {
//Filtering
// create collectionview, grid, filter with timeout, textbox for inputting filter.
filteringGrid = wijmo.Control.getControl('#filteringGrid');
cvFiltering = filteringGrid.itemsSource;
filteringInput = document.getElementById('filteringInput');
// apply filter when input
filteringInput.addEventListener('input', filterGrid);
});
//Filtering
// create collectionview, grid, filter with timeout, textbox for inputting filter.
var cvFiltering = null,
filteringGrid = null,
toFilter,
filteringInput = null;
// define the filter function for the collection view.
function filterFunction(item) {
var filter = filteringInput.value.toLowerCase();
if (!filter) {
return true;
}
return item.CustomerID.toLowerCase().indexOf(filter) > -1;
};
// apply filter (applied on a 500 ms timeOut)
function filterGrid() {
if (toFilter) {
clearTimeout(toFilter);
}
toFilter = setTimeout(function () {
toFilter = null;
if (cvFiltering.filter === filterFunction) {
cvFiltering.refresh();
}
else {
cvFiltering.filter = filterFunction;
}
}, 500);
};
using System.Web.Mvc;
using CollectionView101.Models;
using C1.Web.Mvc.Grid;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using System.Data.Entity.Validation;
using System.Data.Entity;
namespace CollectionView101.Controllers
{
public class HomeController : Controller
{
private C1NWindEntities db = new C1NWindEntities();
// GET: Home
public ActionResult Index()
{
return View(db);
}
}
}
The CollectionView class supports grouping through the ICollectionView interface, which is identical to the
one in .NET. To enable grouping, add one or more GroupDescription objects to the
CollectionView.groupDescriptions property, and ensure that the grid's showGroups property
is set to true when creating the grid instance(the default value is false.).
GroupDescription objects are flexible, allowing you to group data based on value or on grouping
functions.
The example below groups the collection by the field which you select from the list.
The grid shows not only the items content but also the group information: the group name and the average value of amount in the group.
You can find the rendering codes for these in the method initTBody. The corresponding code snippet locates in line 116.
Notes: Selecting one item in the list will add a new instance of GroupDescription. If the groupdescription already exists, nothing happens.
In order to clear the group setting, select the first item in the list.
$(document).ready(function () {
//Grouping
// reference collectionview, grid, the select element and the names list.
groupingGrid = wijmo.Control.getControl('#groupingGrid');
cvGrouping = groupingGrid.itemsSource;
groupingFieldNameList = document.getElementById('groupingFieldNameList');
groupingFieldNameList.addEventListener('change', groupGrid);
// initialize the list and listen to the list's change.
groupingFieldNameList.innerHTML += '';
for (var i = 0; i < groupingNames.length; i++) {
groupingFieldNameList.innerHTML += '';
}
});
//Grouping
// create collectionview, grid, the select element and the names list.
var cvGrouping = null,
groupingGrid = null,
groupingFieldNameList = null,
groupingNames = getFilterNames();
// update the group settings.
function groupGrid() {
var gd,
fieldName = groupingFieldNameList.value;
gd = cvGrouping.groupDescriptions;
if (!fieldName) {
// clear all the group settings.
gd.splice(0, gd.length);
return;
}
if (findGroup(fieldName) >= 0) {
return;
}
if (fieldName === 'UnitPrice') {
// when grouping by amount, use ranges instead of specific values
gd.push(new wijmo.collections.PropertyGroupDescription(fieldName, function (item, propName) {
var value = item[propName]; // UnitPrice
if (value > 100) return 'Large Amounts';
if (value > 50) return 'Medium Amounts';
if (value > 0) return 'Small Amounts';
return 'Negative Amounts';
}));
}
else {
// group by specific property values
gd.push(new wijmo.collections.PropertyGroupDescription(fieldName));
}
};
// check whether the group with the specified property name already exists.
function findGroup(propName) {
var gd = cvGrouping.groupDescriptions;
for (var i = 0; i < gd.length; i++) {
if (gd[i].propertyName === propName) {
return i;
}
}
return -1;
};
using System.Web.Mvc;
using CollectionView101.Models;
using C1.Web.Mvc.Grid;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using System.Data.Entity.Validation;
using System.Data.Entity;
namespace CollectionView101.Controllers
{
public class HomeController : Controller
{
private C1NWindEntities db = new C1NWindEntities();
// GET: Home
public ActionResult Index()
{
return View(db);
}
}
}
The CollectionView class can keep track of changes made to the
data. It is useful in situations where you must submit changes
to the server. To turn on change tracking, set the trackChanges
property to true. Once you do that, the CollectionView keeps
track of any changes made to the data and exposes them in three
arrays:
itemsEdited: This list contains items that are edited using
the beginEdit and commitEdit methods.
itemsAdded: This list contains items that are added using the
addNew and commitNew methods.
itemsRemoved: This list contains items that are removed using
the remove method.
This feature is demonstrated below using a FlexGrid. The grid is bound
to a CollectionView with trackChanges set to true.
$(document).ready(function () {
//Tracking changes
tcMainGrid = wijmo.Control.getControl('#tcMainGrid');// the flexGrid to edit the data
tcEditedGrid = wijmo.Control.getControl('#tcEditedGrid'); // the flexGrid to record the edited items
tcAddedGrid = wijmo.Control.getControl('#tcAddedGrid'); // the flexGrid to record the added items
tcRemovedGrid = wijmo.Control.getControl('#tcRemovedGrid'); // the flexGrid to record the removed items
cvTrackingChanges = tcMainGrid.itemsSource;
tcEditedGrid.itemsSource = cvTrackingChanges.itemsEdited;
tcAddedGrid.itemsSource = cvTrackingChanges.itemsAdded;
tcRemovedGrid.itemsSource = cvTrackingChanges.itemsRemoved;
// track changes of the collectionview
cvTrackingChanges.trackChanges = true;
});
//Tracking changes
var tcMainGrid = null,
tcEditedGrid = null,
tcAddedGrid = null,
tcRemovedGrid = null,
cvTrackingChanges = null;
using System.Web.Mvc;
using CollectionView101.Models;
using C1.Web.Mvc.Grid;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using System.Data.Entity.Validation;
using System.Data.Entity;
namespace CollectionView101.Controllers
{
public class HomeController : Controller
{
private C1NWindEntities db = new C1NWindEntities();
// GET: Home
public ActionResult Index()
{
return View(db);
}
}
}
Result (live):
Change the data here
CategoryID
CategoryName
Description
1
Beveragess
Soft drinks, coffees, teas, beers, and ales
2
Condiments
Sweet and savory sauces, relishes, spreads, and seasonings