Excel-Style Quick-Editing

FlexGrid supports quick editing by default. If you select a cell and start typing, the grid will automatically switch to the edit mode so that you can edit cells as you would do in Excel.

The 'quick-edit' mode also allows users to finish editing using the arrow keys to move on to the next cell. Please note that in the full-edit mode, the arrow keys move the cursor within the editor. The F2 key toggles the edit mode between quick and full modes.

If you want to disable quick editing, the easiest way is to handle the beginninEdit event and set the cancel parameter to true if the source event was a 'keypress'. The grid below demonstrates this behavior.

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
6
US
Cameras
135,436
31,459.18
40,845.40
7
Germany
Stereos
169,610
99,190.22
1,631.26
8
UK
Phones
139,988
52,628.41
46,700.93
9
Japan
Computers
137,524
54,681.54
4,055.50
10
Italy
Cameras
37,424
45,332.72
14,858.59
11
Greece
Stereos
197,708
64,269.75
38,148.18
12
US
Phones
6,078
38,100.45
17,157.09
1
2
3
4
5
6
7
8
9
10
// This file locates: "Scripts/Lesson/C1FlexGrid/QuickEditing.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.beginningEdit.addHandler(function (s, e) {
        if (e.data && e.data.type == 'keypress' &&
            !document.getElementById('quickEdit').checked) {
            e.cancel = true;
        }
    });
});
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: QuickEditing
        public ActionResult QuickEditing()
        {
            return View(Models.FlexGridData.GetSales(200));
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.QuickEditing_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.QuickEditing_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.QuickEditing_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.QuickEditing_Text3)
</p>
 
<label>
    @Html.Raw(Resources.C1FlexGrid.QuickEditing_Text4)
    <input id="quickEdit" type="checkbox" checked="true">
</label>
 
@Html.C1().FlexGrid().Id("theGrid").Bind(Model).Height(250)