Custom Editing
Although FlexGrid provides efficient, Excel-style editing by default, you may want to customize the editing behavior in some cases.
The simplest customization is to keep the grid always in edit mode. This does not save any effort of the user, because anyways, FlexGrid allows editing cells by typing at any time. But, it does show users that the grid is editable.
The easiest way to keep the grid in edit mode at all times is to call the startEditing method when the grid gets the focus and when the selection changes.
ID
Country
Sales
Expenses
Overdue
0
US
81,732.54
38,401.13
1
Germany
20,603.32
27,944.24
2
UK
44,217.79
48,877.49
3
Japan
29,190.63
23,365.74
4
Sweden
46,951.19
49,107.56
5
Norway
86,237.02
49,767.35
6
Denmark
31,459.18
40,845.40
ID
Country
Sales
Expenses
Overdue
0
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // This file locates: "Scripts/Lesson/C1FlexGrid/AlwaysEditing.js". c1.documentReady(function () { var theGrid = wijmo.Control.getControl( '#theGrid' ); var countries = 'US,Germany,UK,Japan,Sweden,Norway,Denmark' .split( ',' ); theGrid.columns[1].dataMap = countries; theGrid.gotFocus.addHandler(function(s, e) { s.startEditing( false ); // quick mode }); theGrid.selectionChanged.addHandler(function (s, e) { setTimeout(function () { s.startEditing( false ); // quick mode }, 50); // let the grid update first }); }); |
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: AlwaysEditing public ActionResult AlwaysEditing() { return View(Models.FlexGridData.GetSales(Models.FlexGridData.Countries7)); } } } |
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 | @model IEnumerable< FlexGridData.Sale > < h1 > @Html .Raw(Resources.C1FlexGrid.AlwaysEditing_Title) </ h1 > < p > @Html .Raw(Resources.C1FlexGrid.AlwaysEditing_Text1) </ p > < p > @Html .Raw(Resources.C1FlexGrid.AlwaysEditing_Text2) </ p > < p > @Html .Raw(Resources.C1FlexGrid.AlwaysEditing_Text3) </ p > @ (Html.C1().FlexGrid().Id( "theGrid" ).Height(200) .AutoGenerateColumns( false ) .Bind(Model) .Columns(cs => { cs.Add().Binding( "Id" ).Header( "ID" ).Width( "50" ); cs.Add().Binding( "Country" ).Header( "Country" ).IsRequired( true ); cs.Add().Binding( "Sales" ).Header( "Sales" ); cs.Add().Binding( "Expenses" ).Header( "Expenses" ); cs.Add().Binding( "Overdue" ).Header( "Overdue" ); }) ) |