fix(grids): keep custom row selector checkbox in sync - master

projects/igniteui-angular/grids/core/src/row.directive.ts

@@ -5,6 +5,7 @@ import {
     Directive,
     DoCheck,
     ElementRef,
+    EmbeddedViewRef,
     EventEmitter,
     forwardRef,
     HostBinding,
@@ -14,14 +15,16 @@ import {
     OnDestroy,
     Output,
     QueryList,
+    TemplateRef,
     ViewChild,
-    ViewChildren
+    ViewChildren,
+    ViewContainerRef
 } from '@angular/core';
 import { IgxGridForOfDirective } from 'igniteui-angular/directives';
 import { ColumnType, mergeObjects, TransactionType } from 'igniteui-angular/core';
 import { IgxGridSelectionService } from './selection/selection.service';
 import { IgxEditRow } from './common/crud.service';
-import { CellType, GridType, IGX_GRID_BASE } from './common/grid.interface';
+import { CellType, GridType, IGX_GRID_BASE, IgxRowSelectorTemplateContext } from './common/grid.interface';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { trackByIdentity } from 'igniteui-angular/core';
@@ -192,6 +195,18 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {
     @ViewChild(forwardRef(() => IgxCheckboxComponent), { read: IgxCheckboxComponent })
     public checkboxElement: IgxCheckboxComponent;
 
+    /**
+     * @hidden
+     * @internal
+     * Anchor for the custom row selector template, rendered via `updateRowSelectorView`.
+     */
+    @ViewChild('rowSelectorOutlet', { read: ViewContainerRef })
+    protected rowSelectorOutlet: ViewContainerRef;
+
+    private _rowSelectorViewRef: EmbeddedViewRef<IgxRowSelectorTemplateContext>;
+    private _rowSelectorViewKey: any;
+    private _rowSelectorViewTemplate: TemplateRef<IgxRowSelectorTemplateContext>;
+
     @ViewChildren('cell')
     protected _cells: QueryList<CellType>;
 
@@ -237,6 +252,22 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {
         this.grid.cdr.markForCheck();
     }
 
+    /**
+     * @hidden
+     * @internal
+     * Context for the custom row selector template.
+     */
+    public get rowSelectorContext(): IgxRowSelectorTemplateContext {
+        return {
+            $implicit: {
+                index: this.viewIndex,
+                rowID: this.key,
+                key: this.key,
+                selected: this.selected
+            }
+        };
+    }
+
     /**
      * @hidden
      */
@@ -484,6 +515,37 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {
     public ngAfterViewInit() {
         // If the template of the row changes, the forOf in it is recreated and is not detected by the grid and rows can't be scrolled.
         this._virtDirRow.changes.pipe(takeUntil(this.destroy$)).subscribe(() => this.grid.resetHorizontalVirtualization());
+        this.updateRowSelectorView();
+    }
+
+    /**
+     * @hidden
+     * @internal
+     * Renders the custom row selector template, re-creating its view whenever this row component is
+     * recycled for a different record (or the template changes). Interactive native elements in the
+     * template (e.g. `<input type="checkbox" [checked]>`) mutate their own DOM state; when such DOM
+     * is reused for another record, Angular skips re-writing a binding whose value appears unchanged
+     * and the stale visual state would stick (#17292). A fresh view per record guarantees the first
+     * binding write always happens against pristine DOM.
+     */
+    protected updateRowSelectorView(): void {
+        const outlet = this.rowSelectorOutlet;
+        const template = this.grid.rowSelectorTemplate;
+        if (!outlet || !template) {
+            this._rowSelectorViewRef = undefined;
+            return;
+        }
+        if (!this._rowSelectorViewRef || this._rowSelectorViewRef.destroyed
+            || template !== this._rowSelectorViewTemplate || this.key !== this._rowSelectorViewKey) {
+            outlet.clear();
+            this._rowSelectorViewTemplate = template;
+            this._rowSelectorViewKey = this.key;
+            this._rowSelectorViewRef = outlet.createEmbeddedView(template, this.rowSelectorContext);
+        } else {
+            // Same record - refresh the context snapshot so selection changes are reflected.
+            this._rowSelectorViewRef.context.$implicit = this.rowSelectorContext.$implicit;
+        }
+        this._rowSelectorViewRef.detectChanges();
     }
 
     /**
@@ -598,6 +660,7 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {
      */
     public ngDoCheck() {
         this.cdr.markForCheck();
+        this.updateRowSelectorView();
     }
 
     /**

projects/igniteui-angular/grids/grid/src/grid-row-selection.spec.ts

@@ -2386,6 +2386,18 @@ describe('IgxGrid - Row Selection #grid', () => {
             grid.rowSelection = GridSelectionMode.multiple;
         }));
 
+        it('Should reflect the selection state in a custom row selector checkbox (#17292)', () => {
+            const getCheckbox = () => GridSelectionFunctions.getRowCheckboxInput(grid.gridAPI.get_row_by_index(0).nativeElement);
+
+            grid.selectRows(['ALFKI']);
+            fix.detectChanges();
+            expect(getCheckbox().checked).toBe(true);
+
+            grid.deselectRows(['ALFKI']);
+            fix.detectChanges();
+            expect(getCheckbox().checked).toBe(false);
+        });
+
         it('Should have the correct properties in the custom row selector template', () => {
             const firstRow = grid.gridAPI.get_row_by_index(0);
             const firstCheckbox = firstRow.nativeElement.querySelector('.igx-checkbox__composite');

projects/igniteui-angular/grids/grid/src/grid-row.component.html

@@ -36,22 +36,11 @@
       (pointerdown)="$event.preventDefault()"
       (click)="onRowSelectorClick($event)"
     >
-      <ng-template
-        *ngTemplateOutlet="
-          this.grid.rowSelectorTemplate
-            ? this.grid.rowSelectorTemplate
-            : rowSelectorBaseTemplate;
-          context: {
-            $implicit: {
-              index: viewIndex,
-              rowID: key,
-              key,
-              selected: selected,
-            },
-          }
-        "
-      >
-      </ng-template>
+      @if (this.grid.rowSelectorTemplate) {
+        <ng-container #rowSelectorOutlet></ng-container>
+      } @else {
+        <ng-template *ngTemplateOutlet="rowSelectorBaseTemplate"></ng-template>
+      }
     </div>
   }
   @if (grid.groupingExpressions.length > 0) {

projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-row.component.html

@@ -52,24 +52,11 @@
       (click)="onRowSelectorClick($event)"
       (pointerdown)="$event.preventDefault()"
     >
-      <ng-template
-        *ngTemplateOutlet="
-          this.grid.rowSelectorTemplate
-            ? this.grid.rowSelectorTemplate
-            : rowSelectorBaseTemplate;
-          context: {
-            $implicit: {
-              index: viewIndex,
-              rowID: key,
-              key,
-              selected: selected,
-              select: select,
-              deselect: deselect,
-            },
-          }
-        "
-      >
-      </ng-template>
+      @if (this.grid.rowSelectorTemplate) {
+        <ng-container #rowSelectorOutlet></ng-container>
+      } @else {
+        <ng-template *ngTemplateOutlet="rowSelectorBaseTemplate"></ng-template>
+      }
     </div>
   }
 

projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-row.component.ts

@@ -11,7 +11,7 @@ import {
 } from '@angular/core';
 import { IgxRowDirective } from 'igniteui-angular/grids/core';
 import { IgxHierarchicalGridCellComponent } from './hierarchical-cell.component';
-import { GridType } from 'igniteui-angular/grids/core';
+import { GridType, IgxRowSelectorTemplateContext } from 'igniteui-angular/grids/core';
 import { IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe } from 'igniteui-angular/grids/core';
 import { IgxRowDragDirective } from 'igniteui-angular/grids/core';
 import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
@@ -138,6 +138,17 @@ export class IgxHierarchicalRowComponent extends IgxRowDirective {
         this.grid.deselectRows([this.key]);
     };
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public override get rowSelectorContext(): IgxRowSelectorTemplateContext {
+        const context = super.rowSelectorContext;
+        context.$implicit.select = this.select;
+        context.$implicit.deselect = this.deselect;
+        return context;
+    }
+
     /**
      * @hidden
      */

projects/igniteui-angular/grids/tree-grid/src/tree-grid-row.component.html

@@ -36,22 +36,11 @@
       (click)="onRowSelectorClick($event)"
       (pointerdown)="$event.preventDefault()"
     >
-      <ng-template
-        *ngTemplateOutlet="
-          this.grid.rowSelectorTemplate
-            ? this.grid.rowSelectorTemplate
-            : rowSelectorBaseTemplate;
-          context: {
-            $implicit: {
-              index: viewIndex,
-              rowID: key,
-              key,
-              selected: selected,
-            },
-          }
-        "
-      >
-      </ng-template>
+      @if (this.grid.rowSelectorTemplate) {
+        <ng-container #rowSelectorOutlet></ng-container>
+      } @else {
+        <ng-template *ngTemplateOutlet="rowSelectorBaseTemplate"></ng-template>
+      }
     </div>
   }
   @if (pinnedStartColumns.length > 0) {

src/app/app.component.ts

@@ -38,7 +38,7 @@
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [
         IgxNavigationDrawerComponent,
         IGX_NAVIGATION_DRAWER_DIRECTIVES,
@@ -434,6 +434,11 @@
             icon: 'view_column',
             name: 'Grid Selection'
         },
+        {
+            link: '/gridRowSelectorCd',
+            icon: 'view_column',
+            name: 'Grid Row Selector CD (#17292)'
+        },
         {
             link: '/gridRowDrag',
             icon: 'view_column',
@@ -830,7 +835,7 @@
         return this.styleLinks.filter(item => item.name.toLowerCase().includes(filterValue));
     });
 
     constructor(private router: Router, private iconService: IgxIconService) {
         iconService.setFamily('fa-solid', { className: 'fa', type: 'font', prefix: 'fa-'});
         iconService.setFamily('fa-brands', { className: 'fab', type: 'font' });
 

src/app/app.routes.ts

@@ -65,6 +65,7 @@ import { GridSummaryComponent } from './grid-summaries/grid-summaries.sample';
 import { GridPerformanceSampleComponent } from './grid-performance/grid-performance.sample';
 import { GridRemotePagingSampleComponent } from './grid-remote-paging/grid-remote-paging.sample';
 import { GridSelectionComponent } from './grid-selection/grid-selection.sample';
+import { GridRowSelectorCdSampleComponent } from './grid-row-selector-cd/grid-row-selector-cd.sample';
 import { GridRowDraggableComponent } from './grid-row-draggable/grid-row-draggable.sample';
 import { GridToolbarSampleComponent } from './grid-toolbar/grid-toolbar.sample';
 import { GridToolbarCustomSampleComponent } from './grid-toolbar/grid-toolbar-custom.sample';
@@ -530,6 +531,10 @@ export const appRoutes: Routes = [
         path: 'gridSelection',
         component: GridSelectionComponent
     },
+    {
+        path: 'gridRowSelectorCd',
+        component: GridRowSelectorCdSampleComponent
+    },
     {
         path: 'gridRowDrag',
         component: GridRowDraggableComponent