Editing

The FlexGrid has built-in support for Excel-like, efficient, in-cell editing. There is no need to add extra columns with 'Edit' buttons that switch between display and edit modes.

Users can start editing simply by typing into any cell. This is called 'quick-edit' mode. In this mode, the cursor keys finish the editing and the grid moves the selection. Users may also start editing by pressing F2 or by clicking a cell twice. This is called 'full-edit' mode. In this mode, the cursor keys move the caret within the editor and the user must press the Enter, Tab, or Escape keys to finish editing.

The grid automatically parses the input and coerces it into the proper data type for the column. If the coercion fails, the original value is restored.

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
// This file locates: "Scripts/Lesson/C1FlexGrid/Editing.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
 
});
1
2
3
4
5
6
7
8
9
10
// This file locates: "Content/css/Lesson/C1FlexGrid/Editing.css".
.wj-flexgrid {
  max-height: 220px;
}
.wj-cell.wj-group {
  border: none;
}
.wj-cell.wj-group:not(.wj-state-selected):not(.wj-state-multi-selected) {
  background-color: white;
}
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: Editing
        public ActionResult Editing()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.Editing_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.Editing_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Editing_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Editing_Text3)
</p>
 
@Html.C1().FlexGrid().Id("theGrid").Bind(Model)