fix(grid): can no longer select deleted rows, #3424

IgniteUI · Dec 17, 2018 · 68b6abd · 68b6abd
1 parent ae21495
commit 68b6abd
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 9 deletions.
diff --git a/projects/igniteui-angular/src/lib/grids/api.service.ts b/projects/igniteui-angular/src/lib/grids/api.service.ts
@@ -599,4 +599,21 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent> {
         const grid = this.get(id);
         return grid.primaryKey ? rowData[grid.primaryKey] : rowData;
     }
+
+    public row_deleted_transaction(id: string, rowID: any): boolean {
+        const grid = this.get(id);
+        if (!grid) {
+            return false;
+        }
+        const transactions = grid.transactions;
+        if (!grid.transactions.enabled) {
+            return false;
+        }
+        const state = transactions.getState(rowID);
+        if (state) {
+            return state.type === TransactionType.DELETE;
+        }
+
+        return false;
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -4021,7 +4021,15 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      */
     public selectRows(rowIDs: any[], clearCurrentSelection?: boolean) {
         let newSelection: Set<any>;
-        newSelection = this.selection.add_items(this.id, rowIDs, clearCurrentSelection);
+        let selectableRows = [];
+        if (this.transactions.enabled) {
+            for (let i = 0; i < rowIDs.length; i++) {
+                selectableRows = rowIDs.filter( e => !this.gridAPI.row_deleted_transaction(this.id, e));
+            }
+        } else {
+            selectableRows = rowIDs;
+        }
+        newSelection = this.selection.add_items(this.id, selectableRows, clearCurrentSelection);
         this.triggerRowSelectionChange(newSelection);
     }
 

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
@@ -3,7 +3,7 @@
 </ng-container>
 <ng-container *ngIf="showRowCheckboxes">
     <div class="igx-grid__cbx-selection">
-        <igx-checkbox [checked]="isSelected" (change)="onCheckboxClick($event)" disableRipple="true" [disableTransitions]="grid.disableTransitions" [aria-label]="rowCheckboxAriaLabel"></igx-checkbox>
+        <igx-checkbox [checked]="isSelected" [disabled]="deleted" (change)="onCheckboxClick($event)" disableRipple="true" [disableTransitions]="grid.disableTransitions" [aria-label]="rowCheckboxAriaLabel"></igx-checkbox>
     </div>
 </ng-container>
 <ng-container *ngIf="pinnedColumns.length > 0">

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
@@ -2865,6 +2865,22 @@ describe('IgxGrid Component Tests', () => {
                 expect(targetRowElement.classList).toContain('igx-grid__tr--edited', 'row does not contain edited class w/ edits');
                 expect(targetCellElement.classList).toContain('igx-grid__td--edited', 'cell does not contain edited class w/ edits');
             }));
+
+            it('Should not allow selecting rows that are deleted', fakeAsync(() => {
+                const fixture = TestBed.createComponent(IgxGridRowEditingTransactionComponent);
+                fixture.detectChanges();
+                const grid = fixture.componentInstance.grid;
+                grid.rowSelectable = true;
+                fixture.detectChanges();
+
+                grid.deleteRowById(2);
+                grid.deleteRowById(3);
+
+                fixture.detectChanges();
+                grid.selectRows([2, 3, 4]);
+                fixture.detectChanges();
+                expect(grid.selectedRows()).toEqual([4]);
+            }));
         });
 
         describe('Row Editing - Grouping',  () => {

diff --git a/projects/igniteui-angular/src/lib/grids/row.component.ts b/projects/igniteui-angular/src/lib/grids/row.component.ts
@@ -322,11 +322,6 @@ export class IgxRowComponent<T extends IgxGridBaseComponent> implements DoCheck
     }
 
     protected isRowDeleted(): boolean {
-        const state: State = this.grid.transactions.getState(this.rowID);
-        if (state) {
-            return state.type === TransactionType.DELETE;
-        }
-
-        return false;
+        return this.gridAPI.row_deleted_transaction(this.gridID, this.rowID);
     }
 }
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="rowSelectable">
     <div class="igx-grid__cbx-selection">
-        <igx-checkbox [checked]="isSelected" (change)="onCheckboxClick($event)" disableRipple="true" [disableTransitions]="grid.disableTransitions" [aria-label]="rowCheckboxAriaLabel"></igx-checkbox>
+        <igx-checkbox [checked]="isSelected" [disabled]="deleted" (change)="onCheckboxClick($event)" disableRipple="true" [disableTransitions]="grid.disableTransitions" [aria-label]="rowCheckboxAriaLabel"></igx-checkbox>
     </div>
 </ng-container>
 <ng-container *ngIf="pinnedColumns.length > 0">