@@ -17,90 +17,15 @@ This skill covers advanced grid features for Ignite UI for Angular: cell editing
1717
1818## Editing
1919
20- ### Cell Editing
20+ > ** Full editing coverage is in the [ ` igniteui-angular-grid-editing ` ] ( ../igniteui-angular-grid-editing/SKILL.md ) skill ** , which includes cell editing, row editing, batch editing with transactions, row adding/deleting, validation, and summaries. Use that skill for any editing task.
2121
22- > ** Docs: ** [ Cell Editing ] ( https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/cell-editing )
22+ Quick reference:
2323
24- ``` html
25- <igx-column field =" name" [editable] =" true" ></igx-column >
26- ```
27-
28- Double-click or press Enter to enter edit mode. Events: ` (cellEditEnter) ` , ` (cellEdit) ` (cancelable), ` (cellEditDone) ` , ` (cellEditExit) ` .
29-
30- ### Row Editing
31-
32- > ** Docs:** [ Row Editing] ( https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-editing )
33-
34- ``` html
35- <igx-grid [rowEditable] =" true" [primaryKey] =" 'id'" >
36- <!-- Custom row edit overlay text -->
37- <ng-template igxRowEditText let-rowChanges >
38- {{ rowChanges.size }} fields changed
39- </ng-template >
40- <ng-template igxRowEditActions >
41- <button igxButton =" flat" igxRowEditTabStop (click) =" rowEditCtx.endRowEdit(false)" >Cancel</button >
42- <button igxButton =" flat" igxRowEditTabStop (click) =" rowEditCtx.endRowEdit(true)" >Save</button >
43- </ng-template >
44- </igx-grid >
45- ```
46-
47- Events: ` (rowEditEnter) ` , ` (rowEdit) ` (cancelable), ` (rowEditDone) ` , ` (rowEditExit) ` .
48-
49- ### Batch Editing (Transactions)
50-
51- > ** Docs:** [ Batch Editing] ( https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/batch-editing )
52-
53- ``` html
54- <igx-grid [batchEditing] =" true" [primaryKey] =" 'id'" [rowEditable] =" true" ></igx-grid >
55- ```
56-
57- ``` typescript
58- // Commit all changes
59- this .gridRef ().transactions .commit (this .gridRef ().data );
60-
61- // Undo last change
62- this .gridRef ().transactions .undo ();
63-
64- // Redo
65- this .gridRef ().transactions .redo ();
66-
67- // Discard all changes
68- this .gridRef ().transactions .clear ();
69- ```
70-
71- ### Adding and Deleting Rows
72-
73- > ** Docs:** [ Row Adding] ( https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-adding )
74-
75- ``` typescript
76- // Add row
77- this .gridRef ().addRow ({ id: 999 , name: ' New User' , email: ' new@example.com' });
78-
79- // Delete row by primary key
80- this .gridRef ().deleteRow (42 );
81-
82- // Open add-row UI at top or bottom
83- this .gridRef ().beginAddRowByIndex (0 ); // at top
84- ```
85-
86- Events: ` (rowAdded) ` , ` (rowDeleted) ` , ` (rowAdd) ` (cancelable), ` (rowDelete) ` (cancelable).
87-
88- ### Validation
89-
90- > ** Docs:** [ Validation] ( https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/validation )
91-
92- Built-in validators on columns:
93-
94- ``` html
95- <igx-column field =" email" [editable] =" true" required [validators] =" emailValidators" >
96- </igx-column >
97- ```
98-
99- ``` typescript
100- emailValidators = [Validators .required , Validators .email ];
101- ```
102-
103- Events: ` (formGroupCreated) ` , ` (validationStatusChange) ` .
24+ | Mode | Key properties |
25+ | ---| ---|
26+ | ** Cell editing** | ` [editable]="true" ` on columns + ` (cellEditDone) ` |
27+ | ** Row editing** (recommended default) | ` [rowEditable]="true" ` + ` [editable]="true" ` on columns + ` (rowEditDone) ` |
28+ | ** Batch editing** | ` [batchEditing]="true" ` + ` [rowEditable]="true" ` + ` transactions.commit(data) ` |
10429
10530## Grouping (Grid only)
10631
@@ -126,43 +51,15 @@ this.gridRef().clearGrouping('category');
12651
12752## Summaries
12853
129- > ** Docs: ** [ Summaries ] ( https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/ summaries) (substitute URL prefix per grid type — see instruction above)
54+ > ** Full summaries coverage (built-in and custom summary operands) is in the [ ` igniteui-angular-grid-editing ` ] ( ../igniteui-angular-grid-editing/SKILL.md ) skill. **
13055
131- Enable per-column summaries:
56+ Quick reference — enable per-column summaries:
13257
13358``` html
13459<igx-column field =" salary" dataType =" number" [hasSummary] =" true" ></igx-column >
13560```
13661
137- Default summaries by type:
138- - ** number** : Count, Min, Max, Sum, Average
139- - ** date** : Count, Earliest, Latest
140- - ** string/boolean** : Count
141-
142- Custom summary class:
143-
144- ``` typescript
145- class SalarySummary extends IgxNumberSummaryOperand {
146- operate(data : number []): IgxSummaryResult [] {
147- return [{
148- key: ' median' ,
149- label: ' Median' ,
150- summaryResult: this .median (data )
151- }];
152- }
153-
154- private median(data : number []): number {
155- const sorted = [... data ].sort ((a , b ) => a - b );
156- const mid = Math .floor (sorted .length / 2 );
157- return sorted .length % 2 ? sorted [mid ] : (sorted [mid - 1 ] + sorted [mid ]) / 2 ;
158- }
159- }
160- ```
161-
162- ``` html
163- <igx-column field =" salary" [hasSummary] =" true" [summaries] =" salarySummary" >
164- </igx-column >
165- ```
62+ Default summaries by type: ** number** → Count/Min/Max/Sum/Average; ** date** → Count/Earliest/Latest; ** string/boolean** → Count.
16663
16764## Cell Merging
16865
0 commit comments