fix(rowPinning): Fix issues with styling and reverse navigation changes. Simplify grid template.

skrustev · skrustev · commit 901a8582bffb · 2020-03-27T19:53:04.000+02:00
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss
@@ -681,6 +681,11 @@
             @extend %igx-grid__hierarchical-expander--cosy !optional;
         }
 
+        @include e(hierarchical-expander, $m: empty) {
+            @extend %igx-grid__hierarchical-expander--cosy !optional;
+            @extend %igx-grid__hierarchical-expander--empty !optional;
+        }
+
         @include e(hierarchical-expander, $m: push) {
             @extend %igx-grid__hierarchical-expander--push--cosy !optional;
         }
@@ -780,6 +785,11 @@
         @include e(hierarchical-expander) {
             @extend %igx-grid__hierarchical-expander--compact !optional;
         }
+        
+        @include e(hierarchical-expander, $m: empty) {
+            @extend %igx-grid__hierarchical-expander--compact !optional;
+            @extend %igx-grid__hierarchical-expander--empty !optional;
+        }
 
         @include e(hierarchical-expander, $m: push) {
             @extend %igx-grid__hierarchical-expander--push--compact !optional;
diff --git a/projects/igniteui-angular/src/lib/grids/grid-mrl-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-mrl-navigation.service.ts
@@ -219,7 +219,7 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
             } else if (prevRow) {
                 prevRow.nativeElement.focus({ preventScroll: true });
             } else {
-                const prevElem = this.getRowByIndex(rowIndex) as any;
+                const prevElem = this.getRowByIndex(rowIndex, '') as any;
                 prevElem.focus({ preventScroll: true });
             }
         };
@@ -264,7 +264,7 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
             } else if (nextRow) {
                 nextRow.nativeElement.focus({ preventScroll: true });
             } else {
-                const nextElem = this.getRowByIndex(rowIndex) as any;
+                const nextElem = this.getRowByIndex(rowIndex, '') as any;
                 nextElem.focus({ preventScroll: true });
             }
         };
diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts
@@ -323,7 +323,8 @@ export class IgxGridNavigationService {
             this.grid.verticalScrollContainer.onChunkLoad
                 .pipe(first())
                 .subscribe(() => {
-                    rowElement = this.getRowByIndex(currentRowIndex);
+                    const tag = rowElement.tagName.toLowerCase();
+                    rowElement = this.getRowByIndex(currentRowIndex, tag);
                     this.focusPreviousElement(rowElement, visibleColumnIndex);
                 });
         } else {
@@ -593,7 +594,7 @@ export class IgxGridNavigationService {
         if (visibleColumnIndex === 0 && prevIsDetailRow) {
             let target = currentRowEl.previousElementSibling;
             const applyFocusFunc = () => {
-                    target = this.getRowByIndex(rowIndex - 1);
+                    target = this.getRowByIndex(rowIndex - 1, '');
                     target.focus({ preventScroll: true });
             };
             if (target) {
@@ -627,7 +628,7 @@ export class IgxGridNavigationService {
 
     public shouldPerformVerticalScroll(targetRowIndex: number, visibleColumnIndex: number): boolean {
         const containerTopOffset = parseInt(this.verticalDisplayContainerElement.style.top, 10);
-        const targetRow = this.getRowByIndex(targetRowIndex) as any;
+        const targetRow = this.getRowByIndex(targetRowIndex, '') as any;
         const rowHeight = this.grid.verticalScrollContainer.getSizeAt(targetRowIndex);
         const containerHeight = this.grid.calcHeight ? Math.ceil(this.grid.calcHeight) : 0;
         const targetEndTopOffset = targetRow ? targetRow.offsetTop + rowHeight + containerTopOffset :
@@ -671,10 +672,10 @@ export class IgxGridNavigationService {
         return this.grid;
     }
 
-    protected getRowByIndex(index) {
+    protected getRowByIndex(index, selector = this.getRowSelector()) {
         const gridTag = this.grid.nativeElement.tagName.toLocaleLowerCase();
         const row = Array.from(this.grid.tbody.nativeElement.querySelectorAll(
-            `[data-rowindex="${index}"]`))
+            `${selector}[data-rowindex="${index}"]`))
             .find(x => this.getClosestElemByTag(x, gridTag).getAttribute('id') === this.grid.id);
             return row;
         }
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts
@@ -21,8 +21,7 @@ export class IgxHierarchicalGridCellComponent extends IgxGridCellComponent imple
      * @hidden
      */
     public get displayPinnedChip() {
-        return this.hierarchicalRow.ghostRow &&
-            (!this.grid.visibleColumns[this.visibleColumnIndex - 1] || this.grid.visibleColumns[this.visibleColumnIndex - 1].cellTemplate);
+        return this.hierarchicalRow.pinned && this.hierarchicalRow.ghostRow && this.visibleColumnIndex === 0 && !(this.column as any).cellTemplate;
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -97,13 +97,10 @@
             | gridHierarchicalRowPinning:true:pipeTrigger
             | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
             | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger as pinnedData">
-                <div #pinContainer *ngIf='pinnedData.length > 0' [ngClass]="{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }">
-                    <ng-container *ngFor="let rowData of pinnedData; let rowIndex = index">
-                        <ng-template #hierarchical_record_template>
-                            <igx-hierarchical-grid-row [gridID]="id" [index]="getRowIndex(rowIndex, true)" [rowData]="rowData">
-                            </igx-hierarchical-grid-row>
-                        </ng-template>
-        
+                <div #pinContainer *ngIf='pinnedData.length > 0' class='igx-grid__tr--pinned'
+                    [ngClass]="{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }"
+                    [style.bottom.px]=' !isRowPinningToTop ? pinnedBottom : null'>
+                    <ng-container *ngFor="let rowData of pinnedData; let rowIndex = index">        
                         <ng-container *ngTemplateOutlet="hierarchical_record_template; context: getContext(rowData, rowIndex, true)">
                         </ng-container>
                     </ng-container>
@@ -112,39 +109,40 @@
         </ng-template>
         <ng-container *ngTemplateOutlet="hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null">
         </ng-container>
-        <ng-template igxGridFor let-rowData [igxGridForOf]="data
+        <ng-template igxGridFor let-rowData let-rowIndex="index" [igxGridForOf]="data
         | gridTransaction:id:pipeTrigger
         | visibleColumns:hasVisibleColumns
         | gridHierarchicalRowPinning:false:pipeTrigger
         | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
         | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
         | gridHierarchicalPaging:page:perPage:id:pipeTrigger
-        | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger" let-rowIndex="index"
+        | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger"
             [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" [igxForTrackBy]='trackChanges'
             #verticalScrollContainer (onChunkPreload)="dataLoading($event)">
-            <ng-template #hierarchical_record_template>
-                <igx-hierarchical-grid-row [gridID]="id" [index]="getRowIndex(rowIndex, false)" [ghostRow]="isGhostRecord(rowData)" [rowData]="!isGhostRecord(rowData) ? rowData : rowData.recordData" #row>
-                </igx-hierarchical-grid-row>
-            </ng-template>
-            <ng-template #child_record_template let-rowIndex="index" let-rowData>
-                <div style="overflow:auto;width: 100%;" [attr.data-rowindex]='rowIndex' (scroll)='onContainerScroll()'
-                    [ngClass]="{
-                    'igx-grid__tr-container': true,
-                    'igx-grid__tr--highlighted':isRowHighlighted(rowData)
-                }">
-                    <igx-child-grid-row *ngFor="let layout of childLayoutList" [parentGridID]="id" [index]="getRowIndex(rowIndex, false)"
-                        [rowData]="rowData" [layout]='layout' #row>
-                    </igx-child-grid-row>
-                </div>
-            </ng-template>
             <ng-template
-            [igxTemplateOutlet]='(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template))'
-            [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)' (onViewCreated)='viewCreatedHandler($event)'
-            (onViewMoved)='viewMovedHandler($event)' (onCachedViewLoaded)='cachedViewLoaded($event)'
-            (onBeforeViewDetach)='viewDetachHandler($event)'></ng-template>
+                [igxTemplateOutlet]='(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template))'
+                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)' (onViewCreated)='viewCreatedHandler($event)'
+                (onViewMoved)='viewMovedHandler($event)' (onCachedViewLoaded)='cachedViewLoaded($event)'
+                (onBeforeViewDetach)='viewDetachHandler($event)'>
+            </ng-template>
             <!-- <ng-container *igxTemplateOutlet="(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)"></ng-container> -->
         </ng-template>
+        <ng-template #hierarchical_record_template let-rowIndex="index" let-ghost="ghostRow" let-rowData>
+            <igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [ghostRow]="ghost" [rowData]="rowData" #row>
+            </igx-hierarchical-grid-row>
+        </ng-template>
+        <ng-template #child_record_template let-rowIndex="index" let-rowData>
+            <div style="overflow:auto;width: 100%;" [attr.data-rowindex]='rowIndex' (scroll)='onContainerScroll()'
+                [ngClass]="{
+                'igx-grid__tr-container': true,
+                'igx-grid__tr--highlighted':isRowHighlighted(rowData)
+            }">
+                <igx-child-grid-row *ngFor="let layout of childLayoutList" [parentGridID]="id" [index]="getRowIndex(rowIndex, false)"
+                    [rowData]="rowData" [layout]='layout' #row>
+                </igx-child-grid-row>
+            </div>
+        </ng-template>
         <ng-container *ngTemplateOutlet="hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null">
         </ng-container>
         <ng-container *ngTemplateOutlet="template"></ng-container>
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
@@ -551,7 +551,8 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
             return {
                 $implicit: this.isGhostRecord(rowData) ? rowData.recordData : rowData,
                 templateID: 'dataRow',
-                index: this.getRowIndex(rowIndex, pinned)
+                index: this.getRowIndex(rowIndex, pinned),
+                ghostRow: this.isGhostRecord(rowData)
             };
         }
     }
diff --git a/src/app/grid-row-pinning/grid-row-pinning.sample.html b/src/app/grid-row-pinning/grid-row-pinning.sample.html
@@ -5,10 +5,13 @@
     <button (click)="grid1.addRow({'ID': 'TEST', 'CompanyName': 'Test'})">Add Row</button>
     <div class="sample-content">
         <div class="sample-column">
+            <div>
+                <input igxButton="raised" type="button" name="Density" (click)="toggleDensity()" value="Density"/>
+                <span> Current: {{displayDensityOptions.displayDensity}}</span>
+            </div>
             <div class="sample-switches">
                 <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>
-                <input igxButton type="button" name="Unpin" (click)="clickUnpin()"/>
             </div>
         <igx-grid [allowFiltering]='true' [primaryKey]='"ID"' [pinning]="pinningConfig" [showToolbar]='true' [columnPinning]='true' #grid1 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelectable]="false">
             <igx-column width='70px' [filterable]='false'>
@@ -29,7 +32,7 @@
         </igx-grid>
         </div>
         <div class="sample-column">
-            <igx-hierarchical-grid [showExpandAll]='true' [data]="hierarchicalData" [pinning]="pinningConfig" [showToolbar]='true' [columnPinning]='true' [width]="'800px'" [height]="'500px'" [rowSelectable]="true" #hGrid>
+            <igx-hierarchical-grid [showExpandAll]='true' [data]="hierarchicalData" [pinning]="pinningConfig" [showToolbar]='true' [columnPinning]='true' [columnHiding]='true' [width]="'800px'" [height]="'500px'" [rowSelectable]="true" #hGrid>
                 <igx-column width='70px' [filterable]='false'>
                     <ng-template igxCell let-cell="cell" let-val>
                         <igx-icon class="pin-icon" (mousedown)="togglePining(cell.row, $event)">
diff --git a/src/app/grid-row-pinning/grid-row-pinning.sample.ts b/src/app/grid-row-pinning/grid-row-pinning.sample.ts
@@ -1,12 +1,25 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { IgxGridComponent, ColumnPinningPosition, RowPinningPosition, IgxGridRowComponent, IgxTransactionService, IgxGridTransaction, IgxHierarchicalRowComponent, IgxHierarchicalGridComponent } from 'igniteui-angular';
+import { Component, OnInit, ViewChild, Input, Inject } from '@angular/core';
+import { 
+    IgxGridComponent,
+    ColumnPinningPosition,
+    RowPinningPosition,
+    IgxGridRowComponent,
+    IgxTransactionService,
+    IgxGridTransaction,
+    IgxHierarchicalGridComponent,
+    DisplayDensityToken,
+    DisplayDensity,
+    IDisplayDensityOptions } from 'igniteui-angular';
 import { IPinningConfig } from 'projects/igniteui-angular/src/lib/grids/common/grid.interface';
 
 @Component({
-    providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }],
     selector: 'app-grid-row-pinning-sample',
     styleUrls: ['grid-row-pinning.sample.css'],
-    templateUrl: 'grid-row-pinning.sample.html'
+    templateUrl: 'grid-row-pinning.sample.html',
+    providers: [
+        { provide: IgxGridTransaction, useClass: IgxTransactionService },
+        { provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.comfortable} }
+    ],
 })
 
 export class GridRowPinningSampleComponent implements OnInit {
@@ -18,6 +31,8 @@ export class GridRowPinningSampleComponent implements OnInit {
     @ViewChild('hGrid', { static: true })
     hGrid: IgxHierarchicalGridComponent;
 
+    constructor(@Inject(DisplayDensityToken) public displayDensityOptions: IDisplayDensityOptions) {}
+
     onRowChange() {
         if (this.pinningConfig.rows === RowPinningPosition.Bottom) {
             this.pinningConfig = { columns: this.pinningConfig.columns, rows: RowPinningPosition.Top };
@@ -149,4 +164,12 @@ export class GridRowPinningSampleComponent implements OnInit {
         console.log(cell);
         return true;
     }
+
+    toggleDensity() {
+        switch (this.displayDensityOptions.displayDensity ) {
+            case DisplayDensity.comfortable: this.displayDensityOptions.displayDensity = DisplayDensity.compact; break;
+            case DisplayDensity.compact: this.displayDensityOptions.displayDensity = DisplayDensity.cosy; break;
+            case DisplayDensity.cosy: this.displayDensityOptions.displayDensity = DisplayDensity.comfortable; break;
+        }
+    }
 }

Original file line number	Diff line number	Diff line change
`@@ -21,8 +21,7 @@ export class IgxHierarchicalGridCellComponent extends IgxGridCellComponent imple`
`21`	`21`	`* @hidden`
`22`	`22`	`*/`
`23`	`23`	`public get displayPinnedChip() {`
`24`		`- return this.hierarchicalRow.ghostRow &&`
`25`		`- (!this.grid.visibleColumns[this.visibleColumnIndex - 1] \|\| this.grid.visibleColumns[this.visibleColumnIndex - 1].cellTemplate);`
	`24`	`+ return this.hierarchicalRow.pinned && this.hierarchicalRow.ghostRow && this.visibleColumnIndex === 0 && !(this.column as any).cellTemplate;`
`26`	`25`	`}`
`27`	`26`
`28`	`27`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -551,7 +551,8 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti`
`551`	`551`	`return {`
`552`	`552`	`$implicit: this.isGhostRecord(rowData) ? rowData.recordData : rowData,`
`553`	`553`	`templateID: 'dataRow',`
`554`		`- index: this.getRowIndex(rowIndex, pinned)`
	`554`	`+ index: this.getRowIndex(rowIndex, pinned),`
	`555`	`+ ghostRow: this.isGhostRecord(rowData)`
`555`	`556`	`};`
`556`	`557`	`}`
`557`	`558`	`}`