Merge pull request #11677 from IgniteUI/mkirova/feat-11578-master

Add delete and edit buttons hiding properties for igx-grid-editing-ac…
IgniteUI · Jun 8, 2022 · 307237b · 307237b
2 parents 169fc83 + 50d4335
commit 307237b
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,9 @@ All notable changes for each version of this project will be documented in this
 - `Migrations`
     - Migrations now support Yarn berry (version 2+)
 
+- `IgxGridEditingActions`
+    - Added new inputs to show/hide the edit and delete buttons - `editRow`, `deleteRow`.
+
 ## 13.2.0
 
 ### General

diff --git a/...ts/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.html b/...ts/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.html
@@ -1,8 +1,8 @@
 
 <ng-container *ngIf="isRowContext">
-    <igx-grid-action-button *ngIf="!disabled" [asMenuItem]="asMenuItems" iconName="edit" [labelText]="grid.resourceStrings.igx_grid_actions_edit_label" (actionClick)="startEdit($event)"></igx-grid-action-button>
+    <igx-grid-action-button *ngIf="!disabled && editRow" [asMenuItem]="asMenuItems" iconName="edit" [labelText]="grid.resourceStrings.igx_grid_actions_edit_label" (actionClick)="startEdit($event)"></igx-grid-action-button>
     <igx-grid-action-button *ngIf="addRow && isRootRow" [asMenuItem]="asMenuItems" iconName="add-row" iconSet="imx-icons" [labelText]="grid.resourceStrings.igx_grid_actions_add_label" (actionClick)="addRowHandler($event)"></igx-grid-action-button>
     <igx-grid-action-button *ngIf="addChild && hasChildren" [asMenuItem]="asMenuItems" iconName="add-child" iconSet="imx-icons" [labelText]="grid.resourceStrings.igx_grid_actions_add_child_label" (actionClick)="addRowHandler($event, true)"></igx-grid-action-button>
-    <igx-grid-action-button *ngIf="!disabled" class="igx-action-strip__delete" classNames='igx-action-strip__menu-item--danger' [asMenuItem]="asMenuItems" iconName="delete" [labelText]="grid.resourceStrings.igx_grid_actions_delete_label" (actionClick)="deleteRow($event)"></igx-grid-action-button>
+    <igx-grid-action-button *ngIf="!disabled && deleteRow" class="igx-action-strip__delete" classNames='igx-action-strip__menu-item--danger' [asMenuItem]="asMenuItems" iconName="delete" [labelText]="grid.resourceStrings.igx_grid_actions_delete_label" (actionClick)="deleteRowHandler($event)"></igx-grid-action-button>
 </ng-container>
 
diff --git a/...igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts b/...igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts
@@ -92,6 +92,26 @@ describe('igxGridEditingActions #grid ', () => {
             expect(grid.selectionService.activeElement.column).toBe(1);
             expect(grid.selectionService.activeElement.row).toBe(0);
         });
+
+        it('should allow hiding/showing the edit/delete actions via the related property.', () => {
+           const editActions = fixture.componentInstance.actionStrip.actionButtons.first;
+           editActions.editRow = false;
+           fixture.detectChanges();
+
+           grid.actionStrip.show(grid.rowList.first);
+           fixture.detectChanges();
+           let icons = fixture.debugElement.queryAll(By.css(`igx-grid-editing-actions igx-icon`));
+           let iconsText = icons.map(x => x.nativeElement.innerText);
+           expect(iconsText).toEqual(['delete']);
+
+           editActions.editRow = true;
+           editActions.deleteRow = false;
+           fixture.detectChanges();
+
+           icons = fixture.debugElement.queryAll(By.css(`igx-grid-editing-actions igx-icon`));
+           iconsText = icons.map(x => x.nativeElement.innerText);
+           expect(iconsText).toEqual(['edit']);
+        });
     });
 
     describe('Menu ', () => {

diff --git a/...ects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts b/...ects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts
@@ -35,6 +35,18 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
         return this._addRow;
     }
 
+    /**
+     * An input to enable/disable action strip row editing button
+     */
+    @Input()
+    public editRow = true;
+
+    /**
+    * An input to enable/disable action strip row deleting button
+    */
+    @Input()
+    public deleteRow = true;
+
     /**
      * Getter if the row is disabled
      *
@@ -115,10 +127,10 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
      *
      * @example
      * ```typescript
-     * this.gridEditingActions.deleteRow();
+     * this.gridEditingActions.deleteRowHandler();
      * ```
      */
-    public deleteRow(event?): void {
+    public deleteRowHandler(event?): void {
         if (event) {
             event.stopPropagation();
         }

diff --git a/src/app/grid-add-row/grid-add-row.sample.html b/src/app/grid-add-row/grid-add-row.sample.html
@@ -25,7 +25,7 @@
 
         <igx-action-strip #actionstrip>
             <igx-grid-pinning-actions></igx-grid-pinning-actions>
-            <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
+            <igx-grid-editing-actions [addRow]="false" [editRow]="false" [deleteRow]='false'></igx-grid-editing-actions>
         </igx-action-strip>
         <igx-paginator
             *ngIf="paging"