This sample demonstrates CRUD operations in Grid with Dialog Template
feature. You can perform CRUD operations as follows,
Add
- To add new record, click Add toolbar button Edit
- To edit record, double click a row or click toolbar Edit button after selected a row Delete
- To delete record, click toolbar Delete button after selected a row Update
,Cancel
- You can save or discard changes by click toolbar Update and cancel button respectivelyOrder ID | Customer Name | Freight | Order Date | Ship Country |
---|---|---|---|---|
10248 | Paul Henriot | $32.38 | 7/4/1996 | France |
10249 | Karin Josephs | $11.61 | 7/5/1996 | Germany |
10250 | Mario Pontes | $65.83 | 7/8/1996 | Brazil |
10251 | Mary Saveley | $41.34 | 7/8/1996 | France |
10252 | Pascale Cartrain | $51.30 | 7/9/1996 | Belgium |
10253 | Mario Pontes | $58.17 | 7/10/1996 | Brazil |
10254 | Yang Wang | $22.98 | 7/11/1996 | Switzerland |
10255 | Michael Holz | $148.33 | 7/12/1996 | Switzerland |
10256 | Paula Parente | $13.97 | 7/15/1996 | Brazil |
10257 | Carlos Hernández | $81.91 | 7/16/1996 | Venezuela |
10258 | Roland Mendel | $140.51 | 7/17/1996 | Austria |
10259 | Francisco Chang | $3.25 | 7/18/1996 | Mexico |
The Grid supports CRUD operations. This CRUD operations can be configured in Grid using
editSettings
.
In this demo, Dialog template is enabled for editing
by defining
editSettings.mode
as Dialog
and
editSettingsTemplate
as a React template.
You can start editing by double clicking a row or clicking on toolbar's Edit
button,
then the currently selected row will be shown on a dialog with custom elements and you can change the row values and save edited data to the datasource.
Injecting Module:
Grid features are segregated into individual feature-wise modules. To use editing feature, we need to inject
Edit
module into the services
.