Adding and Removing Rows

In most of the cases, you do not need to write code to add or remove rows from the grid. By default, it has one row of column headers and one row per bound item which is added automatically when you set the grid's itemsSource property.

If you want to allow users to add or remove rows at runtime, use the following properties:

  • allowAddNew: Setting this property to true causes the grid to show a new row 'template' at the bottom of the grid. Users may add new rows to the itemsSource array by filling out the cells in the new row template.
  • allowRemove: Setting this property to true causes the grid to handle the 'Delete' key and remove selected rows. Users may click row headers to select the row, then press 'Delete' to remove the bound items from the itemsSource array.
  • newRowAtTop: Setting this property to true causes the grid to show the new row template at the top of the grid rather than at the bottom.

The grid below shows how this works:

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
// This file locates: "Scripts/Lesson/C1FlexGrid/RowsAddingRemoving.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.allowAddNew = true;
    theGrid.allowDelete = true;
 
    // toggle new row position
    document.getElementById('newRowAtTop').addEventListener('click', function (e) {
        theGrid.newRowAtTop = e.target.checked;
    })
});
1
2
3
4
// This file locates: "Content/css/Lesson/C1FlexGrid/RowsAddingRemoving.css".
.wj-cell.wj-new:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multiselected) {
  background: #ffff80
}
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: RowsAddingRemoving
        public ActionResult RowsAddingRemoving()
        {
            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
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.RowsAddingRemoving_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsAddingRemoving_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsAddingRemoving_Text2)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1FlexGrid.RowsAddingRemoving_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.RowsAddingRemoving_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.RowsAddingRemoving_Text5)
    </li>
</ul>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsAddingRemoving_Text6)
</p>
 
<label>
    @Html.Raw(Resources.C1FlexGrid.RowsAddingRemoving_Text7)
    <input id="newRowAtTop" type="checkbox">
</label>
 
@Html.C1().FlexGrid().Id("theGrid").Bind(b=>b.Bind(Model).DisableServerRead(true)).Height(150)