chore(*): Replace editable input with disabled input containing logic for preveinting row selection as wel. Update hierarchical grid.

skrustev · skrustev · commit aff72cd5eeff · 2020-03-31T15:00:21.000+03:00
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -524,7 +524,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      * Returns whether the cell is editable.
      */
     get editable(): boolean {
-        return (this.column.editable && (this.row.editable === undefined || this.row.editable)) || this.row.editable;
+        return (this.column.editable && !this.row.disabled) || !this.row.disabled;
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/grids/common/row.interface.ts b/projects/igniteui-angular/src/lib/grids/common/row.interface.ts
@@ -5,7 +5,7 @@ export interface RowType {
     checkboxElement: IgxCheckboxComponent;
     rowID: any;
     rowData: any;
-    editable: boolean;
+    disabled: boolean;
     rowSelectable: boolean;
     index: number;
     gridID: string;
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
@@ -76,7 +76,7 @@
         <igx-checkbox
             [checked]="selected"
             [readonly]="true"
-            [disabled]="deleted"
+            [disabled]="disabled || deleted"
             disableRipple="true"
             [disableTransitions]="grid.disableTransitions"
             [aria-label]="rowCheckboxAriaLabel">
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts
@@ -495,7 +495,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
      */
     public isHierarchicalRecord(record: any): boolean {
         if (this.isGhostRecord(record)) {
-            record = record.recordData;
+            record = record.recordRef;
         }
         return this.childLayoutList.length !== 0 && record[this.childLayoutList.first.key];
     }
@@ -509,7 +509,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
     }
 
     public isGhostRecord(record: any): boolean {
-        return record.ghostRec !== undefined;
+        return record.ghostRecord !== undefined;
     }
 
     /**
@@ -549,7 +549,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
             }
         } else {
             return {
-                $implicit: this.isGhostRecord(rowData) ? rowData.recordData : rowData,
+                $implicit: this.isGhostRecord(rowData) ? rowData.recordRef : rowData,
                 templateID: 'dataRow',
                 index: this.getRowIndex(rowIndex, pinned),
                 ghostRow: this.isGhostRecord(rowData)
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.pipes.ts
@@ -37,8 +37,8 @@ export class IgxGridHierarchicalPipe implements PipeTransform {
 
         data.forEach((v: any) => {
             result.push(v);
-            if (v.ghostRec !== undefined) {
-                v = v.recordData;
+            if (v.ghostRecord !== undefined) {
+                v = v.recordRef;
             }
 
             const childGridsData = {};
@@ -101,7 +101,7 @@ export class IgxGridHierarchicalRowPinning implements PipeTransform {
         }
 
         const result = collection.map((value) => {
-            return grid.isRecordPinned(value) ? { recordData: value, ghostRec: true} : value;
+            return grid.isRecordPinned(value) ? { recordRef: value, ghostRecord: true} : value;
         });
         return result;
     }
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html
@@ -71,7 +71,7 @@
             [readonly]="true"
             [checked]="selected"
             disableRipple="true"
-            [disabled]="ghostRow || deleted"
+            [disabled]="disabled || deleted"
             [disableTransitions]="grid.disableTransitions"
             [aria-label]="rowCheckboxAriaLabel">
         </igx-checkbox>
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts
@@ -31,12 +31,9 @@ export class IgxHierarchicalRowComponent extends IgxRowDirective<IgxHierarchical
     * @hidden
     */
     @Input()
-        /**
-     * @hidden
-     */
     @HostBinding('class.igx-grid__tr--ghost-copy')
     public set ghostRow(value: boolean) {
-        this.editable = !value;
+        this.disabled = value;
         this._ghostRow = value;
     }
 
@@ -193,22 +190,4 @@ export class IgxHierarchicalRowComponent extends IgxRowDirective<IgxHierarchical
             g.endEdit();
         }});
     }
-
-    /**
-     * @hidden
-     * @internal
-     */
-    @HostListener('click', ['$event'])
-    public onClick(event: MouseEvent) {
-        if (this.ghostRow) { return; }
-        super.onClick(event);
-     }
-
-    /**
-     * @hidden
-     */
-    public onRowSelectorClick(event) {
-        if (this.ghostRow) { return; }
-        super.onRowSelectorClick(event);
-     }
 }
diff --git a/projects/igniteui-angular/src/lib/grids/row.directive.ts b/projects/igniteui-angular/src/lib/grids/row.directive.ts
@@ -60,14 +60,14 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
     public index: number;
 
     /**
-     * Sets whether this specific row can be editable.
+     * Sets whether this specific row has disabled functionality for editing and row selection.
      * Default value is `false`.
      * ```typescript
      * this.grid.selectedRows[0].pinned = true;
      * ```
      */
     @Input()
-    public editable: boolean;
+    public disabled = false;
 
     /**
      * Gets whether the row is pinned.
@@ -320,7 +320,7 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
      */
     @HostListener('click', ['$event'])
     public onClick(event: MouseEvent) {
-        if (this.grid.rowSelection === 'none' || this.deleted) { return; }
+        if (this.grid.rowSelection === 'none' || this.deleted || this.disabled) { return; }
         if (event.shiftKey && this.grid.rowSelection === 'multiple') {
             this.selectionService.selectMultipleRows(this.rowID, this.rowData, event);
             return;
@@ -332,6 +332,7 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
      * @hidden
      */
     public onRowSelectorClick(event) {
+        if (this.disabled) { return; }
         event.stopPropagation();
         if (event.shiftKey && this.grid.rowSelection === 'multiple') {
             this.selectionService.selectMultipleRows(this.rowID, this.rowData, event);
diff --git a/src/app/grid-row-pinning/grid-row-pinning.sample.html b/src/app/grid-row-pinning/grid-row-pinning.sample.html
@@ -13,7 +13,7 @@
                 <igx-switch (change)='onRowChange()' style="padding-left: 10px"> Bottom Row Pinning toggle</igx-switch>
                 <igx-switch (change)='onChange()' style="padding-left: 10px"> Right Column Pinning toggle</igx-switch>
             </div>
-        <igx-grid [allowFiltering]='true' [primaryKey]='"ID"' [pinning]="pinningConfig" [showToolbar]='true' [columnPinning]='true' #grid1 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelectable]="false">
+        <igx-grid [allowFiltering]='true' [primaryKey]='"ID"' [paging]="true" [pinning]="pinningConfig" [showToolbar]='true' [columnPinning]='true' #grid1 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelectable]="false">
             <igx-column width='70px' [filterable]='false'>
                 <ng-template igxCell let-cell="cell" let-val>
                     <igx-icon class="pin-icon" (mousedown)="togglePining(cell.row, $event)">
@@ -32,15 +32,24 @@
         </igx-grid>
         </div>
         <div class="sample-column">
-            <igx-hierarchical-grid [showExpandAll]='true' [data]="hierarchicalData" [pinning]="pinningConfig" [showToolbar]='true' [columnPinning]='true' [columnHiding]='true' [width]="'800px'" [height]="'500px'" [rowSelectable]="true" #hGrid>
+            <igx-hierarchical-grid #hGrid [width]="'800px'" [height]="'600px'" [paging]="true" [primaryKey]='"ID"' [rowEditable]="true" [allowFiltering]='true'
+                [showExpandAll]='true' [data]="hierarchicalData" [pinning]="pinningConfig" [showToolbar]='true' [columnPinning]='true' [columnHiding]='true'  [rowSelectable]="true" >
+                <ng-template igxToolbarCustomContent>
+                    <app-grid-search-box [grid]="hGrid" [style.width]="'400px'"></app-grid-search-box>
+                </ng-template>
                 <igx-column width='70px' [filterable]='false'>
                     <ng-template igxCell let-cell="cell" let-val>
                         <igx-icon class="pin-icon" (mousedown)="togglePining(cell.row, $event)">
                             {{cell.row.pinned ? 'lock' : 'lock_open'}}
                         </igx-icon>
                     </ng-template>
                 </igx-column>
-                <igx-column *ngFor="let c of hColumns" [sortable]="true" [field]="c.field" [header]="c.field" [width]="c.width" [pinned]='c.pinned' [groupable]='c.groupable' [editable]="true">
+                <igx-column width='100px' [filterable]='false'>
+                    <ng-template igxCell let-cell="cell" let-val>
+                        <button (click)="hGrid.deleteRow(cell.cellID.rowID)">Delete</button>
+                    </ng-template>
+                </igx-column>
+                <igx-column *ngFor="let c of hColumns" [sortable]="true" [field]="c.field" [header]="c.field" [width]="c.width" [pinned]='c.pinned' [groupable]='c.groupable' >
                 </igx-column>
                 <igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelectable]='true'  [allowFiltering]='true'  >
                     <igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelectable]='true' [allowFiltering]='true'></igx-row-island>

Original file line number	Diff line number	Diff line change
`@@ -524,7 +524,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {`
`524`	`524`	`* Returns whether the cell is editable.`
`525`	`525`	`*/`
`526`	`526`	`get editable(): boolean {`
`527`		`- return (this.column.editable && (this.row.editable === undefined \|\| this.row.editable)) \|\| this.row.editable;`
	`527`	`+ return (this.column.editable && !this.row.disabled) \|\| !this.row.disabled;`
`528`	`528`	`}`
`529`	`529`
`530`	`530`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -495,7 +495,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti`
`495`	`495`	`*/`
`496`	`496`	`public isHierarchicalRecord(record: any): boolean {`
`497`	`497`	`if (this.isGhostRecord(record)) {`
`498`		`- record = record.recordData;`
	`498`	`+ record = record.recordRef;`
`499`	`499`	`}`
`500`	`500`	`return this.childLayoutList.length !== 0 && record[this.childLayoutList.first.key];`
`501`	`501`	`}`
`@@ -509,7 +509,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti`
`509`	`509`	`}`
`510`	`510`
`511`	`511`	`public isGhostRecord(record: any): boolean {`
`512`		`- return record.ghostRec !== undefined;`
	`512`	`+ return record.ghostRecord !== undefined;`
`513`	`513`	`}`
`514`	`514`
`515`	`515`	`/**`
`@@ -549,7 +549,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti`
`549`	`549`	`}`
`550`	`550`	`} else {`
`551`	`551`	`return {`
`552`		`- $implicit: this.isGhostRecord(rowData) ? rowData.recordData : rowData,`
	`552`	`+ $implicit: this.isGhostRecord(rowData) ? rowData.recordRef : rowData,`
`553`	`553`	`templateID: 'dataRow',`
`554`	`554`	`index: this.getRowIndex(rowIndex, pinned),`
`555`	`555`	`ghostRow: this.isGhostRecord(rowData)`
Original file line number	Diff line number	Diff line change
`@@ -37,8 +37,8 @@ export class IgxGridHierarchicalPipe implements PipeTransform {`
`37`	`37`
`38`	`38`	`data.forEach((v: any) => {`
`39`	`39`	`result.push(v);`
`40`		`- if (v.ghostRec !== undefined) {`
`41`		`- v = v.recordData;`
	`40`	`+ if (v.ghostRecord !== undefined) {`
	`41`	`+ v = v.recordRef;`
`42`	`42`	`}`
`43`	`43`
`44`	`44`	`const childGridsData = {};`
`@@ -101,7 +101,7 @@ export class IgxGridHierarchicalRowPinning implements PipeTransform {`
`101`	`101`	`}`
`102`	`102`
`103`	`103`	`const result = collection.map((value) => {`
`104`		`- return grid.isRecordPinned(value) ? { recordData: value, ghostRec: true} : value;`
	`104`	`+ return grid.isRecordPinned(value) ? { recordRef: value, ghostRecord: true} : value;`
`105`	`105`	`});`
`106`	`106`	`return result;`
`107`	`107`	`}`