CollectionView Editing

CollectionView provides support for editing items with the help of methods similar to those found in .NET's IEditableCollectionView interface: editItem, commitEdit, and cancelEdit.

The editItem method saves a copy of the item and puts the collection in 'edit mode'. While in edit mode, the view is not refreshed, so items are not sorted or filtered out of view during the edit process.

The commitEdit method exits the edit mode so that sorting and filtering become active again. If the item has changed, the collectionChanged event is fired to reflect the changes in the bound controls.

The cancelEdit method restores the original data and exits the edit mode.

Edit the grid below to observe how this works.

To edit the grid, double click a cell. When editing starts, a pencil icon appears on the row header to indicate that the collection is in edit mode.

To cancel the editing process, press the Escape key while editing and restore the original data.

To commit the edits, move the selection to a different row, or move the focus away from the grid. At this point, the collection is refreshed and any active filtering/sorting is applied again using the new values.

Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
US
Phones
145,248
81,732.54
38,401.13
1
Germany
Computers
111,632
20,603.32
27,944.24
2
UK
Cameras
181,205
44,217.79
48,877.49
3
Japan
Stereos
54,740
29,190.63
23,365.74
4
Italy
Phones
126,531
46,951.19
49,107.56
5
Greece
Computers
6,073
86,237.02
49,767.35
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1MvcController : Controller
    {
        // GET: CVEditingViews
        public ActionResult CVEditingViews()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1Mvc.CVEditingViews_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Mvc.CVEditingViews_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVEditingViews_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVEditingViews_Text3)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVEditingViews_Text4)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVEditingViews_Text5)
    </p>
<p>
    @Html.Raw(Resources.C1Mvc.CVEditingViews_Text6)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVEditingViews_Text7)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVEditingViews_Text8)
</p>
 
@(Html.C1().FlexGrid().Id("theGrid")
    .Bind(Model)
)