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

Author: skrustev

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;
     }
 
     /**

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;

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">

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)

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;
     }

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>

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);
-     }
 }

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);

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>