Merge pull request #5358 from IgniteUI/mvenkov/sync-column-editable-with-roweditable

Calculate column editable depending on rowEditable

Author: Lipata

projects/igniteui-angular/src/lib/grids/column.component.ts

@@ -117,18 +117,36 @@ export class IgxColumnComponent implements AfterContentInit {
         }
     }
     /**
-     * Sets/gets whether the column is editable.
+     * Gets whether the column is editable.
      * Default value is `false`.
      * ```typescript
      * let isEditable = this.column.editable;
      * ```
+     * @memberof IgxColumnComponent
+     */
+    @Input()
+    get editable(): boolean {
+        let result = false;
+        if (this._editable !== undefined) {
+            result = this._editable;
+        } else {
+            result = this.grid && this.grid.rowEditable && this.field !== this.grid.primaryKey;
+        }
+        return result;
+    }
+    /**
+     * Sets whether the column is editable.
+     * ```typescript
+     * this.column.editable = true;
+     * ```
      * ```html
      * <igx-column [editable] = "true"></igx-column>
      * ```
      * @memberof IgxColumnComponent
      */
-    @Input()
-    public editable = null;
+    set editable(editable: boolean) {
+        this._editable = editable;
+    }
     /**
      * Sets/gets whether the column is filterable.
      * Default value is `true`.
@@ -1063,6 +1081,10 @@ export class IgxColumnComponent implements AfterContentInit {
      *@hidden
      */
     protected _hasSummary = false;
+    /**
+     * @hidden
+     */
+    protected _editable: boolean;
     /**
      *@hidden
      */

projects/igniteui-angular/src/lib/grids/grid-base.component.ts

@@ -4517,7 +4517,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         collection.forEach((column: IgxColumnComponent) => {
             column.grid = this;
             column.defaultWidth = this.columnWidth;
-            this.setColumnEditState(column);
 
             if (cb) {
                 cb(column);
@@ -4533,14 +4532,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         }
     }
 
-    private setColumnEditState(column: IgxColumnComponent) {
-        // When rowEditable is true, then all columns, with defined field, excluding priamaryKey, are set to editable by default.
-        if (this.rowEditable && column.editable === null &&
-            column.field && column.field !== this.primaryKey) {
-            column.editable = this.rowEditable;
-        }
-    }
-
     /**
      * @hidden
      */

projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts

@@ -1640,6 +1640,7 @@ describe('IgxGrid Component Tests', () => {
         beforeEach(async(() => {
             TestBed.configureTestingModule({
                 declarations: [
+                    IgxGridTestComponent,
                     IgxBasicGridRowEditingComponent,
                     IgxGridRowEditingComponent,
                     IgxGridRowEditingWithoutEditableColumnsComponent,
@@ -3496,19 +3497,61 @@ describe('IgxGrid Component Tests', () => {
         });
 
         describe('Row Editing - Column editable property', () => {
-            it('Default column editable value is true, when row editing is enabled', fakeAsync(() => {
+            it('Default column editable value is correct, when row editing is enabled', fakeAsync(() => {
                 const fixture = TestBed.createComponent(IgxGridRowEditingWithoutEditableColumnsComponent);
                 fixture.detectChanges();
-                tick(16);
+                tick();
 
                 const grid = fixture.componentInstance.grid;
 
-                const columns: IgxColumnComponent[] = grid.columnList.toArray();
-                expect(columns[0].editable).toBeFalsy();
-                expect(columns[1].editable).toBeFalsy();
-                expect(columns[2].editable).toBeTruthy();
-                expect(columns[3].editable).toBeTruthy();
-                expect(columns[4].editable).toBeFalsy();
+                let columns: IgxColumnComponent[] = grid.columnList.toArray();
+                expect(columns[0].editable).toBeTruthy(); // column.editable not set
+                expect(columns[1].editable).toBeFalsy(); // column.editable not set. Primary column
+                expect(columns[2].editable).toBeTruthy(); // column.editable set to true
+                expect(columns[3].editable).toBeTruthy(); // column.editable not set
+                expect(columns[4].editable).toBeFalsy();  // column.editable set to false
+
+                grid.rowEditable = false;
+                columns = grid.columnList.toArray();
+                expect(columns[0].editable).toBeFalsy(); // column.editable not set
+                expect(columns[1].editable).toBeFalsy(); // column.editable not set. Primary column
+                expect(columns[2].editable).toBeTruthy(); // column.editable set to true
+                expect(columns[3].editable).toBeFalsy(); // column.editable not set
+                expect(columns[4].editable).toBeFalsy();  // column.editable set to false
+
+                grid.rowEditable = true;
+                columns = grid.columnList.toArray();
+                expect(columns[0].editable).toBeTruthy(); // column.editable not set
+                expect(columns[1].editable).toBeFalsy(); // column.editable not set. Primary column
+                expect(columns[2].editable).toBeTruthy(); // column.editable set to true
+                expect(columns[3].editable).toBeTruthy(); // column.editable not set
+                expect(columns[4].editable).toBeFalsy();  // column.editable set to false
+            }));
+
+            it(`Default column editable value is correct, when row edititng is disabled`, fakeAsync(() => {
+                const fixture = TestBed.createComponent(IgxGridTestComponent);
+                fixture.componentInstance.columns.push({ field: 'ID', header: 'ID', dataType: 'number', width: null, hasSummary: false });
+                fixture.componentInstance.data = [
+                    { ID: 0, index: 0, value: 0},
+                    { ID: 1, index: 1, value: 1},
+                    { ID: 2, index: 2, value: 2},
+                ];
+                const grid = fixture.componentInstance.grid;
+                grid.primaryKey = 'ID';
+
+                fixture.detectChanges();
+                tick();
+
+                let columns: IgxColumnComponent[] = grid.columnList.toArray();
+                expect(columns[0].editable).toBeFalsy(); // column.editable not set
+                expect(columns[1].editable).toBeFalsy(); // column.editable not set
+                expect(columns[2].editable).toBeFalsy(); // column.editable not set. Primary column
+
+                grid.rowEditable = true;
+                columns = grid.columnList.toArray();
+                expect(columns[0].editable).toBeTruthy(); // column.editable not set
+                expect(columns[1].editable).toBeTruthy(); // column.editable not set
+                expect(columns[2].editable).toBeFalsy();  // column.editable not set. Primary column
             }));
         });