feat(igxTreeGrid): Implements disabled row #6640

Author: 3phase

projects/igniteui-angular/src/lib/grids/common/row.interface.ts

@@ -5,10 +5,12 @@ export interface RowType {
     checkboxElement: IgxCheckboxComponent;
     rowID: any;
     rowData: any;
+    disabled: boolean;
     rowSelectable: boolean;
     index: number;
     gridID: string;
     added: boolean;
+    pinned: boolean;
     deleted: boolean;
     selected: boolean;
     focused: boolean;

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

@@ -5784,7 +5784,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             this.lastSearchInfo = { ...this.lastSearchInfo };
 
             if (scroll !== false) {
-                this.scrollTo(matchInfo.row, matchInfo.column);
+                matchInfo.row.ghostRec !== undefined ? this.scrollTo(matchInfo.row.recordData, matchInfo.column) :
+                            this.scrollTo(matchInfo.row, matchInfo.column);
             }
 
             IgxTextHighlightDirective.setActiveHighlight(this.id, {
@@ -5931,7 +5932,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         const datePipe = new IgxDatePipeComponent(this.locale);
         data.forEach((dataRow) => {
             const ghostRec = dataRow.ghostRec !== undefined;
-            const data = { ...dataRow };
+            const dataRowRec = { ...dataRow };
             dataRow = ghostRec ? dataRow.recordData : dataRow;
             columnItems.forEach((c) => {
                 const value = c.formatter ? c.formatter(dataRow[c.field]) :
@@ -5944,7 +5945,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
                     if (exactMatch) {
                         if (searchValue === searchText) {
                             this.lastSearchInfo.matchInfoCache.push({
-                                row: data,
+                                row: dataRowRec,
                                 column: c.field,
                                 index: 0,
                             });

projects/igniteui-angular/src/lib/grids/row.directive.ts

@@ -58,6 +58,17 @@ export class IgxRowDirective<T extends IgxGridBaseDirective & GridType> implemen
     @Input()
     public index: number;
 
+    /**
+     * 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()
+    @HostBinding('class.igx-grid__tr--disabled')
+    public disabled = false;
+
     /**
      * Gets whether the row is pinned.
      * ```typescript
@@ -309,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;
@@ -321,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);

projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html

@@ -1,7 +1,7 @@
 <ng-template #defaultCell>
     <div igxTextHighlight style="pointer-events: none" [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
         [value]="formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
-        [row]="row.treeRow.data" [column]="this.column.field" [containerClass]="'igx-grid__td-text'"
+        [row]="rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'"
         class="igx-grid__td-text">{{ formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal:
         grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}</div>
 </ng-template>
@@ -36,13 +36,7 @@
          (click)="toggle($event)" (focus)="onIndicatorFocus()" tabindex="-1">
          <ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit:  this }">
         </ng-container>
-        <!-- <igx-chip [hidden]="!row.pinnedBodyInstance"
-                    draggable="false"
-                    disabled="true"
-                    displayDensity="cosy"
-                    #pinnedIndicator>
-            Pinned
-        </igx-chip> -->
+        <igx-chip *ngIf="displayPinnedChip" class="igx-grid__td--pinned-chip" [disabled]="true" [displayDensity]="'compact'">Pinned</igx-chip>
     </div>
     <div *ngIf="isLoading"
          (dblclick)="onLoadingDblClick($event)"

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

@@ -70,4 +70,11 @@ export class IgxTreeGridCellComponent extends IgxGridExpandableCellComponent {
     public onLoadingDblClick(event: Event) {
         event.stopPropagation();
     }
+
+    /**
+     * @hidden
+     */
+    public get displayPinnedChip() {
+        return this.row.pinned && this.row.disabled && this.visibleColumnIndex === 0 && !(this.column as any).cellTemplate;
+    }
 }

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html

@@ -21,7 +21,7 @@
             [class.igx-grid__td--number]="col.dataType === 'number'"
             [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex"
             [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex"
-            [editMode]="col.editable && crudService.isInEditMode(index, col.index)"
+            [editMode]="col.editable && crudService.isInEditMode(index, col.index) && !disabled"
             [column]="col"
             [formatter]="col.formatter"
             [row]="this"
@@ -47,7 +47,7 @@
             [level]="treeRow.level"
             [expanded]="treeRow.expanded"
             [showIndicator]="showIndicator"
-            [editMode]="col.editable && crudService.isInEditMode(index, col.index)"
+            [editMode]="col.editable && crudService.isInEditMode(index, col.index) && !disabled"
             [column]="col"
             [formatter]="col.formatter"
             [row]="this"
@@ -75,7 +75,7 @@
         <igx-checkbox
             [readonly]="true"
             [checked]="selected"
-            [disabled]="deleted"
+            [disabled]="deleted || disabled"
             disableRipple="true"
             [disableTransitions]="grid.disableTransitions"
             [aria-label]="rowCheckboxAriaLabel">

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

@@ -115,8 +115,8 @@
             </ng-template>
         </ng-template>
         <ng-container *ngTemplateOutlet="hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null"></ng-container>
-        <ng-template #record_template let-rowIndex="index" let-rowData>
-            <igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" #row>
+        <ng-template #record_template let-rowIndex="index" let-disabledRow="disabled" let-rowData>
+            <igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" [disabled]="disabledRow" #row>
             </igx-tree-grid-row>
         </ng-template>
         <ng-template #summary_template let-rowIndex="index" let-rowData>

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

@@ -378,10 +378,10 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
     /**
      * @hidden @internal
      */
-    private flattenTreeGridRecords(records: ITreeGridRecord[], flatData: any[]) {
+    private flattenTreeGridRecords(records: any[], flatData: any[]) {
         if (records && records.length) {
             for (const record of records) {
-                (this.isGhostRecord(record)) ? flatData.push(record.data.recordData) : flatData.push(record.data);
+                (this.isGhostRecord(record)) ? flatData.push(record.recordData) : flatData.push(record);
                 this.flattenTreeGridRecords(record.children, flatData);
             }
         }
@@ -638,7 +638,8 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
         return {
             $implicit: rowData,
             index: rowIndex,
-            templateID: this.isSummaryRow(rowData) ? 'summaryRow' : 'dataRow'
+            templateID: this.isSummaryRow(rowData) ? 'summaryRow' : 'dataRow',
+            disabled: this.isGhostRecord(rowData.data)
         };
     }