IgxGrid disabled row implementation.

projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts

@@ -90,6 +90,7 @@ export interface IGridResourceStrings {
     igx_grid_advanced_filter_initial_text?: string;
     igx_grid_advanced_filter_column_placeholder?: string;
     igx_grid_advanced_filter_value_placeholder?: string;
+    igx_grid_pinned_row_indicator?: string;
 }
 
 export const GridResourceStringsEN: IGridResourceStrings = {
@@ -183,5 +184,6 @@ export const GridResourceStringsEN: IGridResourceStrings = {
     igx_grid_advanced_filter_delete_filters: 'Delete filters',
     igx_grid_advanced_filter_initial_text: 'Start with creating a group of conditions linked with "And" or "Or"',
     igx_grid_advanced_filter_column_placeholder: 'Select column',
-    igx_grid_advanced_filter_value_placeholder: 'Value'
+    igx_grid_advanced_filter_value_placeholder: 'Value',
+    igx_grid_pinned_row_indicator: 'Pinned'
 };

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -396,6 +396,10 @@
         @extend %grid-cell--pinned--column-selected !optional;
     }
 
+    @include e(td, $m: row-pinned-first) {
+        @extend %grid-cell--row-pinned-first !optional;
+    }
+
     @include e(td, $m: pinned-chip) {
         @extend %grid-cell--pinned-chip !optional;
     }

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1417,6 +1417,10 @@
         }
     }
 
+    %grid-cell--row-pinned-first {
+        overflow: hidden;
+    }
+
     %grid-cell--pinned-chip {
         margin-#{$right}: rem(12px);
     }

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

@@ -1,5 +1,7 @@
+<ng-template #defaultPinnedIndicator>
+    <igx-chip *ngIf="displayPinnedChip" class="igx-grid__td--pinned-chip" [disabled]="true" [displayDensity]="'compact'">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>
+</ng-template>
 <ng-template #defaultCell>
-    <igx-chip *ngIf="displayPinnedChip" class="igx-grid__td--pinned-chip" [disabled]="true" [displayDensity]="'compact'">Pinned</igx-chip>
     <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]="rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'"
@@ -27,5 +29,7 @@
         </igx-date-picker>
     </ng-container>
 </ng-template>
+<ng-container *ngTemplateOutlet="pinnedIndicatorTemplate; context: context">
+</ng-container>
 <ng-container *ngTemplateOutlet="template; context: context">
 </ng-container>

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

@@ -107,6 +107,9 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     @Input()
     public cellTemplate: TemplateRef<any>;
 
+    @Input()
+    public pinnedIndicator: TemplateRef<any>;
+
     /**
      * Sets/gets the cell value.
      * ```typescript
@@ -188,6 +191,20 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         return this.defaultCellTemplate;
     }
 
+    /**
+     * Gets the cell template.
+     * ```typescript
+     * let template = this.cell.template;
+     * ```
+     * @memberof IgxGridCellComponent
+     */
+    get pinnedIndicatorTemplate() {
+        if (this.pinnedIndicator) {
+            return this.pinnedIndicator;
+        }
+        return this.defaultPinnedIndicator;
+    }
+
     /**
      * Gets the `id` of the grid in which the cell is stored.
      * ```typescript
@@ -529,13 +546,17 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     /**
      * @hidden
      */
+    @HostBinding('class.igx-grid__td--row-pinned-first')
     public get displayPinnedChip() {
-        return this.row.pinned && this.row.disabled && this.visibleColumnIndex === 0 && !(this.column as any).cellTemplate;
+        return this.row.pinned && this.row.disabled && this.visibleColumnIndex === 0;
     }
 
     @ViewChild('defaultCell', { read: TemplateRef, static: true })
     protected defaultCellTemplate: TemplateRef<any>;
 
+    @ViewChild('defaultPinnedIndicator', { read: TemplateRef, static: true })
+    protected defaultPinnedIndicator: TemplateRef<any>;
+
     @ViewChild('inlineEditor', { read: TemplateRef, static: true })
     protected inlineEditorTemplate: TemplateRef<any>;
 

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

@@ -2441,6 +2441,11 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     public columnWidthSetByUser = false;
 
+    /**
+     * @hidden @internal
+     */
+    public unpinnedRecords: any[];
+
     data: any[];
     filteredData: any[];
 
@@ -2643,6 +2648,25 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         return false;
     }
 
+    /**
+     * @hidden @internal
+     */
+    public isGhostRecord(record: any): boolean {
+        return record.ghostRecord !== undefined;
+    }
+
+    /**
+     * @hidden
+     */
+    public getRowIndex(rowIndex, pinned) {
+        if (pinned && !this.isRowPinningToTop) {
+            rowIndex = rowIndex + this.dataView.length;
+        } else if (!pinned && this.isRowPinningToTop) {
+            rowIndex = rowIndex + this.pinnedRecordsCount;
+        }
+        return rowIndex;
+    }
+
     /**
      * @hidden
      * @internal
@@ -3403,7 +3427,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * ```
      */
     get pinnedRows(): IgxGridRowComponent[] {
-        return this.rowList.filter(x => x.pinned);
+        return this.rowList.filter(x => x.pinned && !x.disabled);
     }
 
     /**
@@ -5137,7 +5161,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * ```
      */
     get dataView(): any[] {
-        return this.verticalScrollContainer.igxForOf;
+        return this.unpinnedRecords ? this.unpinnedRecords : this.verticalScrollContainer.igxForOf;
     }
 
     /**

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

@@ -25,7 +25,7 @@
     </igx-date-picker>
     </ng-container>
 </ng-template>
-<ng-container *ngIf="!editMode">
+<ng-container *ngIf="showExpanderIndicator">
     <div #indicator
          class="igx-grid__tree-grouping-indicator"
          (click)="toggle($event)" (focus)="onIndicatorFocus()" tabindex="-1">

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

@@ -98,4 +98,12 @@ export class IgxGridExpandableCellComponent extends IgxGridCellComponent impleme
             return this.grid.rowCollapsedIndicatorTemplate || this.defaultCollapsedTemplate;
         }
     }
+
+    /**
+     * @hidden
+     */
+    public get showExpanderIndicator() {
+        const isGhost = this.row.pinned && this.row.disabled;
+        return !this.editMode && (!this.row.pinned || isGhost);
+    }
 }

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

@@ -77,7 +77,7 @@
             [tabindex]="-1"
             [checked]="selected"
             [readonly]="true"
-            [disabled]="disabled || deleted"
+            [disabled]="deleted"
             disableRipple="true"
             [disableTransitions]="grid.disableTransitions"
             [aria-label]="rowCheckboxAriaLabel">

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

@@ -115,11 +115,10 @@
         <ng-container *ngIf='data
         | gridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
-        | rowPinning:id:true:pipeTrigger
+        | gridRowPinning:id:true:pipeTrigger
         | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true
-        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true
-        | gridDetails:hasDetails:expansionStates:pipeTrigger as pinnedData'>
-            <div #pinContainer *ngIf='pinnedData.length > 0'
+        | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData'>
+            <div #pinContainer *ngIf='pinnedData.length > 0' 
                 [ngClass]="{
                     'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,
                     'igx-grid__tr--pinned-top': isRowPinningToTop
@@ -135,13 +134,13 @@
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
         | gridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
-        | rowPinning:id:false:pipeTrigger
         | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
         | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
         | gridGroupBy:groupingExpressions:groupingExpansionState:groupsExpanded:id:groupsRecords:pipeTrigger
         | gridPaging:page:perPage:id:pipeTrigger
         | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:pipeTrigger:summaryPipeTrigger
-        | gridDetails:hasDetails:expansionStates:pipeTrigger"
+        | gridDetails:hasDetails:expansionStates:pipeTrigger
+        | gridRowPinning:id:false:pipeTrigger"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight'
             [igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"
@@ -157,8 +156,8 @@
         </ng-template>
         <ng-container *ngTemplateOutlet="hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null">
         </ng-container>
-        <ng-template #record_template let-rowIndex="index" let-rowData>
-            <igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" #row>
+        <ng-template #record_template let-rowIndex="index" let-rowData let-disabledRow="disabled">
+            <igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" [disabled]="disabledRow" #row>
             </igx-grid-row>
         </ng-template>
         <ng-template #group_template let-rowIndex="index" let-rowData>

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

@@ -515,7 +515,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     /**
      * @hidden @internal
      */
-   public getRowTemplate(rowData) {
+    public getRowTemplate(rowData) {
         if (this.isGroupByRecord(rowData)) {
             return this.defaultGroupTemplate;
         } else if (this.isSummaryRow(rowData)) {
@@ -525,20 +525,21 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         } else {
             return this.recordTemplate;
         }
-   }
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public isDetailRecord(record) {
+        return record.detailsData !== undefined;
+    }
 
     /**
      * @hidden @internal
      */
-   public isDetailRecord(record) {
-    return record.detailsData !== undefined;
-   }
-   /**
-    * @hidden @internal
-    */
-   public isDetailActive(rowIndex) {
-       return this.navigation.activeNode ? this.navigation.activeNode.row === rowIndex : false;
-   }
+    public isDetailActive(rowIndex) {
+        return this.navigation.activeNode ? this.navigation.activeNode.row === rowIndex : false;
+    }
     /**
      * @hidden @internal
      */
@@ -795,9 +796,10 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
             }
         }
         return {
-            $implicit: rowData,
+            $implicit: this.isGhostRecord(rowData) ? rowData.recordRef : rowData,
             index: rowIndex,
-            templateID: this.isGroupByRecord(rowData) ? 'groupRow' : this.isSummaryRow(rowData) ? 'summaryRow' : 'dataRow'
+            templateID: this.isGroupByRecord(rowData) ? 'groupRow' : this.isSummaryRow(rowData) ? 'summaryRow' : 'dataRow',
+            disabled: this.isGhostRecord(rowData)
         };
     }
 

projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts

@@ -103,10 +103,9 @@ export class IgxGridPagingPipe implements PipeTransform {
         if (!this.gridAPI.grid.paging) {
             return collection;
         }
-        const _perPage = perPage - this.gridAPI.grid.pinnedRecordsCount;
         const state = {
             index: page,
-            recordsPerPage: _perPage
+            recordsPerPage: perPage
         };
         DataUtil.correctPagingState(state, collection.data.length);
 
@@ -157,7 +156,7 @@ export class IgxGridFilteringPipe implements PipeTransform {
  * @hidden
  */
 @Pipe({
-    name: 'rowPinning',
+    name: 'gridRowPinning',
     pure: true
 })
 export class IgxGridRowPinningPipe implements PipeTransform {
@@ -171,13 +170,15 @@ export class IgxGridRowPinningPipe implements PipeTransform {
             return isPinned ? [] : collection;
         }
 
-        const result = collection.filter((value, index) => {
-            return  isPinned ? grid.isRecordPinned(value) : !grid.isRecordPinned(value);
-        });
-        if (isPinned) {
-            // pinned records should be ordered as they were pinned.
+        if (grid.hasPinnedRecords && isPinned) {
+            const result = collection.filter(rec => grid.isRecordPinned(rec));
             result.sort((rec1, rec2) => grid.pinRecordIndex(rec1) - grid.pinRecordIndex(rec2));
+            return result;
         }
-        return result;
+
+        grid.unpinnedRecords = collection;
+        return collection.map((rec) => {
+            return grid.isRecordPinned(rec) ? { recordRef: rec, ghostRecord: true} : rec;
+        });
     }
 }