Skip to content

Commit 1c59500

Browse files
Copilotzdrawku
andcommitted
refactor: trim duplicate editing/summaries content in grids-features, redirect to grid-editing skill
Co-authored-by: zdrawku <11193764+zdrawku@users.noreply.github.com>
1 parent 69c6fd6 commit 1c59500

1 file changed

Lines changed: 10 additions & 113 deletions

File tree

  • skills/igniteui-angular-grids-features

skills/igniteui-angular-grids-features/SKILL.md

Lines changed: 10 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Comments
 (0)