igniteui-angular 21.2.4 → 21.2.6

package/skills/igniteui-angular-grids/references/features.md

@@ -32,9 +32,7 @@ Quick reference:
 | **Row editing** (recommended default) | `[rowEditable]="true"` + `[editable]="true"` on columns + `(rowEditDone)` |
 | **Batch editing** | `[batchEditing]="true"` + `[rowEditable]="true"` + `transactions.commit(data)` |
 
-## Grouping (Grid only)
-
-> **Docs:** [Group By](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/groupby)
+## Grouping (Grid and Tree Grid only)
 
 ```html
 <igx-grid [data]="data()" [groupsExpanded]="true">
@@ -67,30 +65,39 @@ For advanced programmatic grouping patterns — see [`data-operations.md`](./dat
 Merge adjacent cells with equal values:
 
 ```html
-<igx-column field="category" [merge]="true"></igx-column>
+<igx-grid [data]="data()" [cellMergeMode]="'always'">
+  <igx-column field="category" [merge]="true"></igx-column>
+</igx-grid>
 ```
 
-Or apply a custom merge strategy:
+Grid merge modes (`cellMergeMode`):
+- `'onSort'` — merge only when the column is sorted **(default)**
+- `'always'` — merge regardless of sort state
+
+Or apply a custom merge strategy at the **grid level** (not column):
 
 ```html
-<igx-column field="price" [merge]="true" [mergeStrategy]="priceRangeMerge"></igx-column>
+<igx-grid [data]="data()" [mergeStrategy]="customMerge" [cellMergeMode]="'always'">
+  <igx-column field="price" [merge]="true"></igx-column>
+</igx-grid>
 ```
 
 ```typescript
-import { IGridMergeStrategy } from 'igniteui-angular/core';
-// import { IGridMergeStrategy } from '@infragistics/igniteui-angular/core'; for licensed package
+import { DefaultMergeStrategy } from 'igniteui-angular/core';
+// import { DefaultMergeStrategy } from '@infragistics/igniteui-angular/core'; for licensed package
 
-priceRangeMerge: IGridMergeStrategy = {
-  shouldMerge(prevCell, curCell) {
-    return Math.abs(prevCell.value - curCell.value) < 10;
+// Extend DefaultMergeStrategy and override comparer
+class PriceRangeMergeStrategy extends DefaultMergeStrategy {
+  public override comparer(prevRecord: any, record: any, field: string): boolean {
+    return Math.abs(prevRecord[field] - record[field]) < 10;
   }
-};
+}
+
+customMerge = new PriceRangeMergeStrategy();
 ```
 
 ## Toolbar
 
-> **Docs:** [Toolbar](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/toolbar)
-
 ```typescript
 import { IgxGridToolbarComponent } from 'igniteui-angular/grids/core';
 ```
@@ -115,8 +122,6 @@ import { IgxGridToolbarComponent } from 'igniteui-angular/grids/core';
 
 ### Excel Export
 
-> **Docs:** [Excel Export](https://www.infragistics.com/products/ignite-ui-angular/angular/components/exporter-excel)
-
 ```typescript
 import { IgxExcelExporterService, IgxExcelExporterOptions } from 'igniteui-angular/grids/core';
 
@@ -133,8 +138,6 @@ export class MyComponent {
 
 ### CSV Export
 
-> **Docs:** [CSV Export](https://www.infragistics.com/products/ignite-ui-angular/angular/components/exporter-csv)
-
 ```typescript
 import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } from 'igniteui-angular/grids/core';
 
@@ -160,19 +163,27 @@ For full remote virtualization patterns — see [`paging-remote.md`](./paging-re
 
 ## Row Drag
 
-> **Docs:** [Row Drag](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-drag)
-
 ```html
 <igx-grid [rowDraggable]="true" (rowDragStart)="onDragStart($event)" (rowDragEnd)="onDragEnd($event)">
-  <ng-template igxRowDragGhost let-dragData>
-    <span>Moving {{ dragData.dragData.name }}</span>
+  <!-- Custom ghost template (purely visual; row data is accessed in event handlers, not in the ghost template) -->
+  <ng-template igxRowDragGhost>
+    <igx-icon>arrow_right_alt</igx-icon>
   </ng-template>
 </igx-grid>
 ```
 
-## Action Strip
+Handle drops via `igxDrop` on the target:
 
-> **Docs:** [Action Strip](https://www.infragistics.com/products/ignite-ui-angular/angular/components/action-strip)
+```typescript
+import { IDropDroppedEventArgs } from 'igniteui-angular/directives';
+
+onDropAllowed(args: IDropDroppedEventArgs) {
+  this.targetGrid.addRow(args.dragData.data);    // row data
+  this.sourceGrid.deleteRow(args.dragData.key);  // primary key
+}
+```
+
+## Action Strip
 
 Overlay actions on a row:
 
@@ -188,8 +199,6 @@ Overlay actions on a row:
 
 ## Master-Detail (Grid only)
 
-> **Docs:** [Master-Detail](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/master-detail)
-
 Expand rows to show arbitrary detail content:
 
 ```html

package/skills/igniteui-angular-grids/references/paging-remote.md

@@ -15,8 +15,6 @@
 
 ## Paging
 
-> **Docs:** [Paging — Remote Paging](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/paging#remote-paging) (substitute URL prefix per grid type)
-
 ### Using the Paginator Component
 
 ```html
@@ -114,8 +112,6 @@ export class RemotePagingComponent {
 
 ## Remote Data Operations
 
-> **Docs:** [Remote Data Operations](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/remote-data-operations) (substitute URL prefix per grid type)
-
 ### The Problem
 
 Grids perform sorting, filtering, and paging **client-side** by default. For large datasets, you must intercept these operations and delegate them to the server.
@@ -130,11 +126,11 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { IgxGridComponent, IGX_GRID_DIRECTIVES } from 'igniteui-angular/grids/grid';
 import {
   IFilteringExpressionsTree,
+  ISortingExpression,
   NoopSortingStrategy,
   NoopFilteringStrategy
 } from 'igniteui-angular/core';
 import { IForOfState } from 'igniteui-angular/directives';
-import { ISortingEventArgs } from 'igniteui-angular/grids/core';
 import { debounceTime, Subject } from 'rxjs';
 
 @Component({
@@ -156,7 +152,7 @@ export class RemoteGridComponent {
   private dataService = inject(OrderService);
   private destroyRef = inject(DestroyRef);
 
-  private currentSort: ISortingEventArgs[] | undefined;
+  private currentSort: ISortingExpression[] | undefined;
   private currentFilter: IFilteringExpressionsTree | undefined;
 
   // Debounce rapid dataPreLoad events during fast scrolling
@@ -179,7 +175,7 @@ export class RemoteGridComponent {
     this.dataPreLoad$.next(event);
   }
 
-  onSortingDone(event: ISortingEventArgs) {
+  onSortingDone() {
     this.currentSort = this.gridRef().sortingExpressions;
     this.loadData(0, 15);
   }
@@ -217,7 +213,7 @@ export class RemoteGridComponent {
   [sortStrategy]="noopSort"
   [filterStrategy]="noopFilter"
   (dataPreLoad)="onDataPreLoad($event)"
-  (sortingDone)="onSortingDone($event)"
+  (sortingDone)="onSortingDone()"
   (filteringExpressionsTreeChange)="onFilteringExpressionsTreeChange()"
   height="600px">
 

package/skills/igniteui-angular-grids/references/sizing.md

@@ -25,6 +25,15 @@ The grid supports both component inputs (`width`/`height`) and regular CSS/layou
 
 **Default:** `100%` — the grid fills available width of the parent/window.
 
+### `null` Width
+
+```html
+<igx-grid [width]="null" ...></igx-grid>
+```
+
+- All columns are rendered in the DOM — **horizontal column virtualization is disabled**.
+- **Warning:** rendering many columns without virtualization can significantly impact performance.
+
 ### Pixel Width
 
 ```html
@@ -141,6 +150,7 @@ html, body, .grid-container {
 - Column width is calculated as a percentage of the grid width.
 - Responsive — resizes when the grid resizes.
 - Combined percentages less than `100%` leave an empty area; greater than `100%` triggers a horizontal scrollbar.
+- If the grid `width` is `null`, percentage-width columns fall back to `136px` each.
 
 ## Grid Cell Spacing Control
 

package/skills/igniteui-angular-grids/references/state.md

@@ -16,8 +16,6 @@
 
 ## State Persistence
 
-> **Docs:** [State Persistence](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/state-persistence) (substitute URL prefix per grid type)
-
 ### Saving and Restoring Grid State
 
 Use `IgxGridStateDirective` to persist sorting, filtering, grouping, paging, selection, and column state:
@@ -115,8 +113,6 @@ onColumnInit(column: IgxColumnComponent) {
 
 ## Tree Grid Data Operations
 
-> **Docs:** [Tree Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/tree-grid) · [Load on Demand](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/load-on-demand)
-
 ### Recursive Filtering Behavior
 
 Tree Grid filtering is **inclusive** — when a child matches, all its ancestors are kept visible (marked as `isFilteredOutParent`) and auto-expanded. This is the default `TreeGridFilteringStrategy`.
@@ -171,8 +167,6 @@ this.treeGridRef().deleteRow(2); // deletes row 2 and all its children
 
 ## Hierarchical Grid Data Operations
 
-> **Docs:** [Hierarchical Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/hierarchical-grid) · [Load on Demand](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/load-on-demand)
-
 ### Independent Grid Levels
 
 Each level of a hierarchical grid has its **own independent** sorting, filtering, and paging state. Configure features on the `<igx-row-island>` blueprint:
@@ -236,8 +230,6 @@ Setting `[batchEditing]="true"` on the root hierarchical grid automatically prop
 
 ## Pivot Grid Data Operations
 
-> **Docs:** [Pivot Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/pivotGrid/pivot-grid)
-
 > **IMPORTANT**: The Pivot Grid does NOT use standard sorting, filtering, editing, or paging APIs. All data operations are controlled through `pivotConfiguration`.
 
 ### Dimension-Based Filtering
@@ -260,18 +252,16 @@ regionFilter.filteringOperands = [
   }
 ];
 
-// Apply the filter to a dimension
+// Apply the filter to a dimension and notify the grid
 this.pivotConfig.filters[0].filter = regionFilter;
-// Notify the grid of the change
-this.pivotGridRef().pipeTrigger++;
+this.pivotGridRef().notifyDimensionChange(true);
 ```
 
 ### Dimension-Based Sorting
 
 ```typescript
-// Sort a row dimension
-this.pivotConfig.rows[0].sortDirection = SortingDirection.Desc;
-this.pivotGridRef().pipeTrigger++;
+// Sort a row dimension via the public API
+this.pivotGridRef().sortDimension(this.pivotConfig.rows[0], SortingDirection.Desc);
 ```
 
 ### Key Pivot Grid Limitations

package/skills/igniteui-angular-grids/references/structure.md

@@ -71,8 +71,6 @@ export class UsersGridComponent {
 
 ## Column Configuration
 
-> **Docs:** [Column Types](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-types)
-
 ### Data Types
 
 Set `dataType` to enable proper formatting, filtering, sorting, and editing:
@@ -91,8 +89,6 @@ Set `dataType` to enable proper formatting, filtering, sorting, and editing:
 
 ### Column Templates
 
-> **Docs:** [Column Configuration](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid#angular-grid-column-configuration)
-
 Override default rendering with template directives:
 
 ```html
@@ -131,8 +127,6 @@ Override default rendering with template directives:
 
 ### Column Groups
 
-> **Docs:** [Collapsible Column Groups](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/collapsible-column-groups)
-
 Group columns under a shared header:
 
 ```html
@@ -149,8 +143,6 @@ Group columns under a shared header:
 
 ### Multi-Row Layout (MRL)
 
-> **Docs:** [Multi-Row Layout](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/multi-row-layout)
-
 Create complex cell layouts spanning multiple rows/columns:
 
 ```html
@@ -163,8 +155,6 @@ Create complex cell layouts spanning multiple rows/columns:
 
 ### Column Pinning
 
-> **Docs:** [Column Pinning](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-pinning)
-
 ```html
 <igx-column field="name" [pinned]="true"></igx-column>
 ```
@@ -173,8 +163,6 @@ Or programmatically: `this.gridRef().pinColumn('name')`.
 
 ## Sorting
 
-> **Docs:** [Sorting](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/sorting) (substitute URL prefix per grid type — see hub instruction)
-
 ```html
 <igx-grid
   [data]="data()"
@@ -199,8 +187,6 @@ For advanced programmatic sorting patterns, custom sort strategies, and sorting
 
 ### Quick Filter (Row Filter)
 
-> **Docs:** [Filtering](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/filtering)
-
 ```html
 <igx-grid [allowFiltering]="true" [filterMode]="'quickFilter'">
   <igx-column field="name" [filterable]="true"></igx-column>
@@ -209,8 +195,6 @@ For advanced programmatic sorting patterns, custom sort strategies, and sorting
 
 ### Excel-Style Filter
 
-> **Docs:** [Excel-Style Filtering](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/excel-style-filtering)
-
 ```html
 <igx-grid [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
   <igx-column field="name" [filterable]="true"></igx-column>
@@ -219,8 +203,6 @@ For advanced programmatic sorting patterns, custom sort strategies, and sorting
 
 ### Advanced Filtering Dialog
 
-> **Docs:** [Advanced Filtering](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/advanced-filtering)
-
 ```html
 <igx-grid [allowAdvancedFiltering]="true">
   <!-- Advanced filtering UI is shown via toolbar or API -->
@@ -243,13 +225,11 @@ For advanced programmatic filtering, complex AND/OR trees, and remote filtering
 
 ### Row Selection
 
-> **Docs:** [Row Selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-selection)
-
 ```html
 <igx-grid [rowSelection]="'multiple'" [primaryKey]="'id'" [(selectedRows)]="selectedIds">
   <!-- Optional: Custom row selector checkbox -->
   <ng-template igxRowSelector let-rowContext>
-    <igx-checkbox [checked]="rowContext.selected" (change)="rowContext.select(!rowContext.selected)">
+    <igx-checkbox [checked]="rowContext.selected" [readonly]="true">
     </igx-checkbox>
   </ng-template>
 </igx-grid>
@@ -259,16 +239,12 @@ Modes: `'none'`, `'single'`, `'multiple'`, `'multipleCascade'` (tree grids).
 
 ### Cell Selection
 
-> **Docs:** [Cell Selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/cell-selection)
-
 ```html
 <igx-grid [cellSelection]="'multiple'"></igx-grid>
 ```
 
 ### Column Selection
 
-> **Docs:** [Column Selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-selection)
-
 ```html
 <igx-grid [columnSelection]="'multiple'">
   <igx-column field="name" [selectable]="true"></igx-column>

package/skills/igniteui-angular-grids/references/types.md

@@ -15,8 +15,6 @@
 
 ## Tree Grid
 
-> **Docs:** [Tree Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/tree-grid)
-
 For data with parent-child relationships **within a single schema** (e.g., org charts, file systems, categories).
 
 ### Two Data Binding Modes
@@ -89,8 +87,6 @@ export class OrgTreeComponent {
 
 ## Hierarchical Grid
 
-> **Docs:** [Hierarchical Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/hierarchical-grid)
-
 For master-detail data where **each level has a different schema** (e.g., Companies → Departments → Employees). Each level is defined by a **Row Island** blueprint.
 
 ```typescript
@@ -184,7 +180,7 @@ npm install igniteui-grid-lite
 ### Setup
 
 ```typescript
-import { Component, CUSTOM_ELEMENTS_SCHEMA, viewChild } from '@angular/core';
+import { Component, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, viewChild } from '@angular/core';
 import {
   IgxGridLiteComponent,
   IgxGridLiteColumnComponent,
@@ -215,7 +211,6 @@ export class UsersLiteComponent {
 ```html
 <igx-grid-lite #grid
   [data]="data"
-  [autoGenerate]="false"
   [sortingOptions]="{ mode: 'multiple' }">
 
   <igx-grid-lite-column
@@ -262,22 +257,21 @@ Columns use `<igx-grid-lite-column>` with these inputs:
 
 ### Templates
 
-Cell and header templates use dedicated directives:
+Use `igxGridLiteCell` for cell templates and `igxGridLiteHeader` for header templates:
 
 ```html
-<igx-grid-lite-column field="status" header="Status">
-  <!-- Custom cell template -->
-  <ng-template igxGridLiteCell let-value let-row="row" let-column="column">
-    <span [class]="value">{{ value }}</span>
+<igx-grid-lite-column field="rating" dataType="number">
+  <ng-template igxGridLiteHeader let-value>
+    <span>⭐ Rating</span>
   </ng-template>
-
-  <!-- Custom header template -->
-  <ng-template igxGridLiteHeader let-column>
-    <strong>{{ column.header }}</strong>
+  <ng-template igxGridLiteCell let-value let-row="row">
+    <span>{{ value }}</span>
   </ng-template>
 </igx-grid-lite-column>
 ```
 
+> When a header template is provided, the `header` text property is ignored.
+
 ### Sorting & Filtering API
 
 ```typescript
@@ -345,9 +339,9 @@ dataPipeline: IgxGridLiteDataPipelineConfiguration<Product> = {
 
 | Event | Cancelable | Payload |
 |---|---|---|
-| `(sorting)` | Yes (`event.detail.cancel = true`) | Sorting expression about to be applied |
+| `(sorting)` | Yes (`event.preventDefault()`) | Sorting expression about to be applied |
 | `(sorted)` | No | Sorting completed |
-| `(filtering)` | Yes (`event.detail.cancel = true`) | Filter expression about to be applied |
+| `(filtering)` | Yes (`event.preventDefault()`) | Filter expression about to be applied |
 | `(filtered)` | No | Filtering completed |
 
 ### Grid Lite Limitations
@@ -378,8 +372,6 @@ These features are **NOT available** in Grid Lite:
 
 ## Pivot Grid
 
-> **Docs:** [Pivot Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/pivotGrid/pivot-grid)
-
 For **pivot table analytics** where users reshape data by dragging dimensions between rows, columns, filters, and values.
 
 > **IMPORTANT**: The Pivot Grid is fundamentally different from the other three grids. Standard grid features like cell editing, row editing, batch editing, paging, column pinning, column moving, row dragging, and standard filtering/sorting are **disabled**. All data operations are driven by the `pivotConfiguration`.

package/types/igniteui-angular-grids-grid.d.ts

@@ -3591,6 +3591,7 @@ declare abstract class IgxGridBaseDirective implements GridType, OnInit, DoCheck
     protected buildDataView(_data: any[]): void;
     private _applyWidthHostBinding;
     protected verticalScrollHandler(event: any): void;
+    protected isZonelessChangeDetection(): boolean;
     protected hasMenuPinningActions(): boolean;
     protected horizontalScrollHandler(event: any): void;
     protected get renderedActualRowHeight(): number;

package/types/igniteui-angular-grids-pivot-grid.d.ts

@@ -1495,6 +1495,7 @@ declare class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIn
     protected rowDimensionByName(memberName: string): IPivotDimension;
     protected calculateResizerTop(): any;
     protected updateDefaultRowHeight(): void;
+    protected trackHorizontalRowGroup: (_index: number, rowGroup: IPivotGridRecord[]) => number;
     /**
      * @hidden @internal
      */