Excel-Style editing: The FlexGrid has built-in support for Excel-like, fast, 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. They can 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.
You can disable editing at the grid, column, or row levels using the isReadOnly property of the grid, column, or row objects.
Mobile Devices: Mobile devices use the double-click event to zoom in and out, and do not show a keyboard by default. To start editing a cell on mobile devices, simply click a cell to select it, then click it again to indicate you want to start editing.
IEditableCollectionView: The FlexGrid supports the IEditableCollectionView interface. When users start editing an item, the grid calls the startEdit method to start editing the item. The collection will not be sorted or filtered until the user selects a different row. Pressing escape while an item is being edited cancels the edits for the entire item, restoring the original values. This is the same behavior used in .NET. It prevents items from moving away as they are edited.
Automatic type Validation/Coercion: If the user types anything that is invalid for the column (e.g. "hello" for a numeric or date column), the edits won't be applied and the cell will keep its original value. Dates and times are parsed using the format assigned to the column.
Checkboxes: By default (and unlike Excel), Boolean values are shown as checkboxes. Users can change the checkbox values by clicking or by pressing the space bar. Checkboxes are easier to read and to edit than fields containing "TRUE" or "FALSE" strings.
DataMaps and Auto-complete: If the column has a data map, then the editor will auto-complete as the user types. In the sample below, the Country column has a data map. Typing "G" will set the editor content to "Germany" and select the "ermany" part of the text. Typing an "r" after that will switch the value to "Greece" and select "eece". Auto-complete allows for fast and accurate data-entry.
Data maps are ideal for displaying and editing key fields to linked tables. For example, map customer and supplier ID columns to show their names. No need to set up additional views with complex joins. Plus, edit the customers or suppliers by picking their names in an auto-complete field, instead of typing their IDs.
Popup editing keeps the native editing enabled for quick Excel-like data entry, and adds an "Edit Detail" button to invoke a form where the user can edit the item details.
To see this in action, select an item on the grid and click the "Edit Detail" button below. This will bring up a form where users can edit the data for the currently selected item.
The detail form uses specialized input controls that take up more space but can make data entry easier in some cases. The form has "OK" and "Cancel" buttons that commit the changes or restore the original data. Both actions are accomplished with a single call to the CollectionView used as a data source for the grid.
If for some reason you don't like the Excel-style editing and prefer to add editing buttons to every row (typical of editable HTML tables), you can accomplish that using a Template and a few controller methods.
The grid below demonstrates this approach. The buttons in the cells call methods in the controller to perform the required actions: