Merge branch 'copilot/split-skills-content' of https://github.com/IgniteUI/igniteui-angular into copilot/split-skills-content

Author: zdrawku

skills/igniteui-angular-grid-data-operations/SKILL.md

@@ -343,7 +343,8 @@ filteringLogic = FilteringLogic.And;
 | Event | Cancelable | Payload |
 |---|---|---|
 | `(filtering)` | Yes | `IFilteringEventArgs` — set `event.cancel = true` to prevent |
-| `(filteringDone)` | No | `IFilteringEventArgs` — fires after filter is applied |
+| `(filteringDone)` | No | `IFilteringEventArgs` — fires after a **column-level** filter is applied |
+| `(filteringExpressionsTreeChange)` | No | `IFilteringExpressionsTree` — fires after the **grid-level** filter tree changes (use this for remote data) |
 
 ```typescript
 onFilteringDone(event: IFilteringEventArgs) {
@@ -352,6 +353,8 @@ onFilteringDone(event: IFilteringEventArgs) {
 }
 ```
 
+> **Remote data note:** For remote filtering, subscribe to `(filteringExpressionsTreeChange)` instead of `(filteringDone)`. The former reflects the complete grid-level filter tree, including "clear all filters" — `filteringDone` is column-scoped and can miss global state changes.
+
 ### Available Filtering Operands by Data Type
 
 | Operand Class | Conditions |

skills/igniteui-angular-grid-paging-remote/SKILL.md

@@ -65,10 +65,13 @@ this.gridRef().paginator.perPage = 25;
 ### Remote Paging
 
 ```typescript
+import { GridPagingMode } from 'igniteui-angular/grids/grid';
+
 export class RemotePagingComponent {
   data = signal<Product[]>([]);
   totalCount = signal(0);
   perPage = signal(15);
+  pagingMode = GridPagingMode.Remote;
 
   gridRef = viewChild.required<IgxGridComponent>('grid');
   private dataService = inject(ProductService);
@@ -100,6 +103,7 @@ export class RemotePagingComponent {
 <igx-grid #grid
   [data]="data()"
   [primaryKey]="'id'"
+  [pagingMode]="pagingMode"
   height="600px">
   <igx-column field="name"></igx-column>
   <igx-column field="price" dataType="number"></igx-column>
@@ -185,7 +189,7 @@ export class RemoteGridComponent {
     this.loadData(0, 15);
   }
 
-  onFilteringDone() {
+  onFilteringExpressionsTreeChange() {
     this.currentFilter = this.gridRef().filteringExpressionsTree;
     this.loadData(0, 15);
   }
@@ -219,7 +223,7 @@ export class RemoteGridComponent {
   [filterStrategy]="noopFilter"
   (dataPreLoad)="onDataPreLoad($event)"
   (sortingDone)="onSortingDone($event)"
-  (filteringDone)="onFilteringDone()"
+  (filteringExpressionsTreeChange)="onFilteringExpressionsTreeChange()"
   height="600px">
 
   <igx-column field="orderId" header="Order ID" [sortable]="true"></igx-column>
@@ -299,7 +303,7 @@ export class OrderService {
 2. **Use `[isLoading]`** — shows a loading indicator while data is being fetched
 3. **Apply `NoopSortingStrategy` and `NoopFilteringStrategy`** — prevents the grid from performing client-side sorting/filtering, so the server results are displayed as-is
 4. **Listen to `(dataPreLoad)`** — fires when the user scrolls and the grid needs more rows; provides `startIndex` and `chunkSize` (first `chunkSize` will be 0 — use a fallback)
-5. **Listen to `(sortingDone)` and `(filteringDone)`** — reset to the beginning and re-fetch with new parameters
+5. **Listen to `(sortingDone)` and `(filteringExpressionsTreeChange)`** — reset to the beginning and re-fetch with new parameters; `filteringExpressionsTreeChange` is the grid-level output that reflects the complete filter state (unlike the column-level `filteringDone`)
 6. **Track current sort/filter state** — store them so every `loadData` call includes the active criteria
 7. **Debounce `(dataPreLoad)`** — use `debounceTime` to avoid flooding the server during fast scrolling
 8. **Use `[uniqueColumnValuesStrategy]`** — when using Excel-style filtering, supply a callback to load unique column values from the server

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

@@ -17,90 +17,15 @@ This skill covers advanced grid features for Ignite UI for Angular: cell editing
 
 ## Editing
 
-### Cell Editing
+> **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.
 
-> **Docs:** [Cell Editing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/cell-editing)
+Quick reference:
 
-```html
-<igx-column field="name" [editable]="true"></igx-column>
-```
-
-Double-click or press Enter to enter edit mode. Events: `(cellEditEnter)`, `(cellEdit)` (cancelable), `(cellEditDone)`, `(cellEditExit)`.
-
-### Row Editing
-
-> **Docs:** [Row Editing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-editing)
-
-```html
-<igx-grid [rowEditable]="true" [primaryKey]="'id'">
-  <!-- Custom row edit overlay text -->
-  <ng-template igxRowEditText let-rowChanges>
-    {{ rowChanges.size }} fields changed
-  </ng-template>
-  <ng-template igxRowEditActions>
-    <button igxButton="flat" igxRowEditTabStop (click)="rowEditCtx.endRowEdit(false)">Cancel</button>
-    <button igxButton="flat" igxRowEditTabStop (click)="rowEditCtx.endRowEdit(true)">Save</button>
-  </ng-template>
-</igx-grid>
-```
-
-Events: `(rowEditEnter)`, `(rowEdit)` (cancelable), `(rowEditDone)`, `(rowEditExit)`.
-
-### Batch Editing (Transactions)
-
-> **Docs:** [Batch Editing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/batch-editing)
-
-```html
-<igx-grid [batchEditing]="true" [primaryKey]="'id'" [rowEditable]="true"></igx-grid>
-```
-
-```typescript
-// Commit all changes
-this.gridRef().transactions.commit(this.gridRef().data);
-
-// Undo last change
-this.gridRef().transactions.undo();
-
-// Redo
-this.gridRef().transactions.redo();
-
-// Discard all changes
-this.gridRef().transactions.clear();
-```
-
-### Adding and Deleting Rows
-
-> **Docs:** [Row Adding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-adding)
-
-```typescript
-// Add row
-this.gridRef().addRow({ id: 999, name: 'New User', email: 'new@example.com' });
-
-// Delete row by primary key
-this.gridRef().deleteRow(42);
-
-// Open add-row UI at top or bottom
-this.gridRef().beginAddRowByIndex(0); // at top
-```
-
-Events: `(rowAdded)`, `(rowDeleted)`, `(rowAdd)` (cancelable), `(rowDelete)` (cancelable).
-
-### Validation
-
-> **Docs:** [Validation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/validation)
-
-Built-in validators on columns:
-
-```html
-<igx-column field="email" [editable]="true" required [validators]="emailValidators">
-</igx-column>
-```
-
-```typescript
-emailValidators = [Validators.required, Validators.email];
-```
-
-Events: `(formGroupCreated)`, `(validationStatusChange)`.
+| Mode | Key properties |
+|---|---|
+| **Cell editing** | `[editable]="true"` on columns + `(cellEditDone)` |
+| **Row editing** (recommended default) | `[rowEditable]="true"` + `[editable]="true"` on columns + `(rowEditDone)` |
+| **Batch editing** | `[batchEditing]="true"` + `[rowEditable]="true"` + `transactions.commit(data)` |
 
 ## Grouping (Grid only)
 
@@ -126,43 +51,15 @@ this.gridRef().clearGrouping('category');
 
 ## Summaries
 
-> **Docs:** [Summaries](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/summaries) (substitute URL prefix per grid type — see instruction above)
+> **Full summaries coverage (built-in and custom summary operands) is in the [`igniteui-angular-grid-editing`](../igniteui-angular-grid-editing/SKILL.md) skill.**
 
-Enable per-column summaries:
+Quick reference — enable per-column summaries:
 
 ```html
 <igx-column field="salary" dataType="number" [hasSummary]="true"></igx-column>
 ```
 
-Default summaries by type:
-- **number**: Count, Min, Max, Sum, Average
-- **date**: Count, Earliest, Latest
-- **string/boolean**: Count
-
-Custom summary class:
-
-```typescript
-class SalarySummary extends IgxNumberSummaryOperand {
-  operate(data: number[]): IgxSummaryResult[] {
-    return [{
-      key: 'median',
-      label: 'Median',
-      summaryResult: this.median(data)
-    }];
-  }
-
-  private median(data: number[]): number {
-    const sorted = [...data].sort((a, b) => a - b);
-    const mid = Math.floor(sorted.length / 2);
-    return sorted.length % 2 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
-  }
-}
-```
-
-```html
-<igx-column field="salary" [hasSummary]="true" [summaries]="salarySummary">
-</igx-column>
-```
+Default summaries by type: **number** → Count/Min/Max/Sum/Average; **date** → Count/Earliest/Latest; **string/boolean** → Count.
 
 ## Cell Merging