chore(action-strip): Disable editing actions for ghost rows

Author: dkamburov

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.html

@@ -1,8 +1,8 @@
-<ng-container *ngIf="isRowContext && !disabled">
-    <button igxButton="icon" igxRipple (click)="startEdit()">
+<ng-container *ngIf="isRowContext">
+    <button igxButton="icon" [disabled]="disabled" igxRipple (click)="startEdit()">
         <igx-icon>edit</igx-icon>
     </button>
-    <button igxButton="icon" class="igx-action-strip__delete" igxRipple (click)="deleteRow()">
+    <button igxButton="icon" [disabled]="disabled" class="igx-action-strip__delete" igxRipple (click)="deleteRow()">
         <igx-icon >delete</igx-icon>
     </button>
 </ng-container>

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts

@@ -64,15 +64,18 @@ describe('igxGridEditingActions #grid ', () => {
             actionStrip = fixture.componentInstance.actionStrip;
             grid = fixture.componentInstance.grid;
         });
-        it('should allow editing actions on disabled rows', () => {
+        it('should disable editing actions on disabled rows', () => {
             grid.rowList.first.pin();
             fixture.detectChanges();
             actionStrip.show(grid.rowList.toArray()[1]);
             fixture.detectChanges();
-            const editingIcons = fixture.debugElement.queryAll(By.css(`igx-grid-editing-actions igx-icon`));
-            const pinningIcons = fixture.debugElement.queryAll(By.css(`igx-grid-pinning-actions igx-icon`));
-            expect(editingIcons.length).toBe(0);
+            const editingIcons = fixture.debugElement.queryAll(By.css(`igx-grid-editing-actions button`));
+            const pinningIcons = fixture.debugElement.queryAll(By.css(`igx-grid-pinning-actions button`));
+            expect(editingIcons.length).toBe(2);
+            expect(editingIcons[0].nativeElement.className.indexOf('igx-button--disabled') !== -1).toBeTruthy();
+            expect(editingIcons[1].nativeElement.className.indexOf('igx-button--disabled') !== -1).toBeTruthy();
             expect(pinningIcons.length).toBe(1);
+            expect(pinningIcons[0].nativeElement.className.indexOf('igx-button--disabled') === -1).toBeTruthy();
         });
     });
 });

src/app/action-strip/action-strip.sample.html

@@ -34,7 +34,7 @@ <h4>Display Density</h4>
         <article>
             <div class="sample-column">
                 <h5>Grid Pinning Action</h5>
-                <igx-grid #grid1 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelectable]="false"
+                <igx-grid #grid1 [data]="data" [width]="'800px'" [height]="'500px'"
                     [rowEditable]="true" [primaryKey]="'ID'" [(displayDensity)]="displayDensity"
                     (mouseleave)="onMouseLeave(actionstrip1)" (mouseover)="onMouseOver($event, grid1, actionstrip1)">
                     <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
@@ -51,7 +51,7 @@ <h5>Grid Pinning Action</h5>
         <article>
             <div class="sample-column">
                 <h5>Grid Pinning and Editing Actions</h5>
-                <igx-grid #grid2 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelectable]="false"
+                <igx-grid #grid2 [data]="data" [width]="'800px'" [height]="'500px'"
                     [rowEditable]="true" [primaryKey]="'ID'" [(displayDensity)]="displayDensity"
                     (mouseleave)="onMouseLeave(actionstrip2)">
                     <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
@@ -74,7 +74,7 @@ <h5>Grid Pinning and Editing Actions</h5>
         <article>
             <div class="sample-column">
                 <h5>Actions in menu</h5>
-                <igx-grid #grid3 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelectable]="false"
+                <igx-grid #grid3 [data]="data" [width]="'800px'" [height]="'500px'"
                     [rowEditable]="true" [primaryKey]="'ID'" [(displayDensity)]="displayDensity"
                     (mouseleave)="onMouseLeave(actionstrip3, $event)"
                     (mouseover)="onMouseOver($event, grid3, actionstrip3)">