This sample demonstrates CRUD operations in Grid using command column. You can perform CRUD operations as follows,
Edit - To edit record, double click a row or click Edit button from command column after selected a row Delete - To delete record, click Delete button from command column after selected a row Update,Cancel - You can save or discard changes by click Update and Cancel button from command column respectivelyOrder ID | Customer ID | Freight | Order Date | Ship Country | Manage Records |
|---|---|---|---|---|---|
| 10248 | VINET | $32.38 | 7/4/1996 | France | |
| 10249 | TOMSP | $11.61 | 7/5/1996 | Germany | |
| 10250 | HANAR | $65.83 | 7/8/1996 | Brazil | |
| 10251 | VICTE | $41.34 | 7/8/1996 | France | |
| 10252 | SUPRD | $51.30 | 7/9/1996 | Belgium | |
| 10253 | HANAR | $58.17 | 7/10/1996 | Brazil | |
| 10254 | CHOPS | $22.98 | 7/11/1996 | Switzerland | |
| 10255 | RICSU | $148.33 | 7/12/1996 | Switzerland | |
| 10256 | WELLI | $13.97 | 7/15/1996 | Brazil | |
| 10257 | HILAA | $81.91 | 7/16/1996 | Venezuela | |
| 10258 | ERNSH | $140.51 | 7/17/1996 | Austria | |
| 10259 | CENTC | $3.25 | 7/18/1996 | Mexico |
The Grid provides an option to render CRUD action buttons in a column by using the CommandColumn feature. The columns->commands property accepts array of CommandModel object. The predefined command button can be defined by using type property.
The built-in command button are,
EditDeleteCancelSaveInjecting Module
Grid features are segregated into individual feature-wise modules. To use commandColumn feature, we need to inject CommandColumnService into the @NgModule.providers section.
More information on the commandcolumn configuration can be found in this documentation section.