CollectionView Adding and Removing Items

The CollectionView provides support for adding items with the methods addNew, commitNew, and cancelNew. Items are removed using the remove method.

The addNew method adds an empty item to the collection and returns a reference to the new item. The caller can use this return value to initialize the new item. Alternatively, you can provide a CollectionView.newItemCreator function to create and initialize the new items.

The addNew method also puts the collection in 'add' mode, suspending sorting and filtering to keep the new item in place until it is committed.

The commitNew method causes the collection to exit 'add mode', refreshes the collection and restores sorting and filtering.

The cancelNew method removes the new item from the collection and exits 'add mode'.

Add items in the grid below to observe how this works.

To add an item, move the selection to the last row, the "New Item Template" (having an asterisk on the row header). Edit the new item as usual, and press Enter or move the selection to a different row to commit the new row.

To cancel the addition, press the Escape key while editing the new row. The row will be removed from the collection.

To remove items, select an entire row by clicking the row header, and then press the Delete key. The grid will call the collection's remove method and the item will be removed from the collection.

Country
Downloads
Sales
Expenses
US
145,248
81,732.54
38,401.13
Germany
111,632
20,603.32
27,944.24
UK
181,205
44,217.79
48,877.49
Japan
54,740
29,190.63
23,365.74
Italy
126,531
46,951.19
49,107.56
Greece
6,073
86,237.02
49,767.35
1
2
3
4
5
6
// This file locates: "Scripts/Lesson/C1Mvc/CVAddingRemoving.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.allowAddNew = true;
    theGrid.allowDelete = true;
});
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: CVAddingRemoving
        public ActionResult CVAddingRemoving()
        {
            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
34
35
36
37
38
39
40
41
42
43
44
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1Mvc.CVAddingRemoving_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Mvc.CVAddingRemoving_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVAddingRemoving_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVAddingRemoving_Text3)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVAddingRemoving_Text4)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVAddingRemoving_Text5)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVAddingRemoving_Text6)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVAddingRemoving_Text7)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVAddingRemoving_Text8)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVAddingRemoving_Text9)
</p>
 
@(Html.C1().FlexGrid().Id("theGrid")
    .Bind(b=>b.Bind(Model).DisableServerRead(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");
    })
)