In this demo, you can edit the currently selected record by changing the state of the corresponding record to edit. You can carry out the following CRUD operations:
Add - To add a new record, click the add toolbar button. Edit - To edit record, double click a cell. Delete - To delete a record, click the toolbar delete button after selecting a row. Update and Cancel - Save or discard changes by clicking the toolbar update and cancel button respectively.By default, a new row will be added at the top of the grid. You can change it by setting editSettings.newRowPosition as Bottom
Order ID | Customer Name | Freight | Order Date | Ship Country |
|---|---|---|---|---|
| 10248 | Paul Henriot | $32.38 | 7/4/1996 10:10 AM | France |
| 10249 | Karin Josephs | $11.61 | 7/5/1996 12:20 PM | Germany |
| 10250 | Mario Pontes | $65.83 | 7/8/1996 08:40 AM | Brazil |
| 10251 | Mary Saveley | $41.34 | 7/8/1996 07:50 AM | France |
| 10252 | Pascale Cartrain | $51.30 | 7/9/1996 12:05 PM | Belgium |
| 10253 | Mario Pontes | $58.17 | 7/10/1996 11:20 AM | Brazil |
| 10254 | Yang Wang | $22.98 | 7/11/1996 10:00 AM | Switzerland |
| 10255 | Michael Holz | $148.33 | 7/12/1996 10:40 AM | Switzerland |
| 10256 | Paula Parente | $13.97 | 7/15/1996 08:50 PM | Brazil |
| 10257 | Carlos Hernández | $81.91 | 7/16/1996 03:20 AM | Venezuela |
| 10258 | Roland Mendel | $140.51 | 7/17/1996 06:30 PM | Austria |
| 10259 | Francisco Chang | $3.25 | 7/18/1996 01:20 AM | Mexico |
Add New Row Position |
Grid supports CRUD operations. This CRUD operations can be configured using
editSettings. It also has the following modes to manipulate the datasource.
NormalDialogBatch
In the normal edit mode, when you start editing the currently selected record is changed to edit state. You can edit any row by double clicking it or clicking the toolbar’s
Edit button. You can change the row values and save edited data to the data source.
In order to add a new record easily, the grid content always displays a blank "add new row".
You can enable this feature by setting the showAddNewRow property of editSettings to true.
Injecting Module
Grid features are separated into feature-wise modules. To use the editing feature, inject
Edit
module into the services.
More information on the inline editing can be found in this documentation section.