Merge from base.

Author: MKirova

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

@@ -2704,6 +2704,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     protected _transactions: TransactionService<Transaction, State>;
     protected _batchEditing = false;
     protected _autoGeneratedCols = [];
+    protected _dataView = [];
 
     /** @hidden @internal */
     public get paginator() {
@@ -2763,7 +2764,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     private _unpinnedWidth = NaN;
     private _visibleColumns = [];
     private _columnGroups = false;
-    private _dataView = [];
 
     private _columnWidth: string;
 
@@ -3447,7 +3447,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             this._filteredSortedData = data;
             this.refreshSearch(true, false);
         }
-        this.buildDataView();
+        this.buildDataView(data);
     }
 
     /**
@@ -6925,7 +6925,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         column.resetCaches();
     }
 
-    private buildDataView() {
+    protected buildDataView(data: any[]) {
         this._dataView = this.isRowPinningToTop ?
             [...this.pinnedDataView, ...this.unpinnedDataView] :
             [...this.unpinnedDataView, ...this.pinnedDataView];

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

@@ -1014,6 +1014,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     protected calcGridHeadRow() {
     }
 
+    protected buildDataView(data: any[]) {
+        this._dataView = data;
+    }
+
     /**
      * @hidden @internal
      */

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

@@ -1,4 +1,4 @@
-import { Pipe, PipeTransform } from '@angular/core';
+import { Inject, Pipe, PipeTransform } from '@angular/core';
 import { cloneArray } from '../../core/utils';
 import { DataUtil } from '../../data-operations/data-util';
 import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
@@ -11,7 +11,7 @@ import {
 import { PivotUtil } from './pivot-util';
 import { FilteringLogic } from '../../data-operations/filtering-expression.interface';
 import { ISortingExpression, SortingDirection } from '../../data-operations/sorting-strategy';
-import { GridType } from '../common/grid.interface';
+import { GridType, IGX_GRID_BASE } from '../common/grid.interface';
 import { GridBaseAPIService } from '../api.service';
 import { IgxGridBaseDirective } from '../grid-base.directive';
 import { IGridSortingStrategy } from '../common/strategy';
@@ -51,7 +51,7 @@ export class IgxPivotRowPipe implements PipeTransform {
 })
 export class IgxPivotRowExpansionPipe implements PipeTransform {
 
-    constructor() { }
+    constructor(@Inject(IGX_GRID_BASE) private grid?: GridType) { }
 
     public transform(
         collection: any[],
@@ -74,6 +74,10 @@ export class IgxPivotRowExpansionPipe implements PipeTransform {
         }
         const finalData = config.columnStrategy ? data : data.filter(x => x[pivotKeys.records]);
         this.cleanState(finalData, pivotKeys);
+
+        if (this.grid) {
+            this.grid.setFilteredSortedData(finalData, false);
+        }
         return finalData;
     }
 
@@ -168,7 +172,6 @@ export class IgxPivotGridFilterPipe implements PipeTransform {
     pure: true
 })
 export class IgxPivotGridColumnSortingPipe implements PipeTransform {
-
     public transform(
         collection: any[],
         expressions: ISortingExpression[],

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

@@ -456,7 +456,7 @@ describe('Basic IgxPivotGrid #pivotGrid', () => {
             pivotGrid.setupColumns();
             fixture.detectChanges();
             const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row');
-            const valueChip = headerRow.querySelector('igx-chip[id="AmountOfSale"]');
+            const valueChip = headerRow.querySelector('igx-chip[id="Amount of Sale"]');
             let content = valueChip.querySelector('.igx-chip__content');
             expect(content.textContent.trim()).toBe('SUM(Amount of Sale)');
 

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts

@@ -53,7 +53,7 @@
 
                 <!-- Value area -->
                 <igx-chips-area #valueArea droppable='true'>
-                    <igx-chip #currChip *ngFor="let value of grid.values" [draggable]="true" [id]="value.member"
+                    <igx-chip #currChip *ngFor="let value of grid.values" [draggable]="true" [id]="value.displayName || value.member"
                         [displayDensity]="grid.displayDensity"
                         [removable]="true" (remove)="valueRemoved($event)"
                         (dragLeave)="onDimDragLeave($event)"

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

@@ -84,7 +84,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         row.enabled = false;
         this.grid.pipeTrigger++;
         this.grid.filteringService.clearFilter(row.memberName);
-        this.grid.dimensionsChange.emit({dimensions: this.grid.pivotConfiguration.rows, dimensionCollectionType: PivotDimensionType.Row});
+        this.grid.dimensionsChange.emit({ dimensions: this.grid.pivotConfiguration.rows, dimensionCollectionType: PivotDimensionType.Row });
     }
 
     public columnRemoved(event: IBaseChipEventArgs) {
@@ -93,23 +93,23 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         this.grid.setupColumns();
         this.grid.filteringService.clearFilter(col.memberName);
         this.grid.pipeTrigger++;
-        this.grid.dimensionsChange.emit({dimensions: this.grid.pivotConfiguration.columns, dimensionCollectionType: PivotDimensionType.Row});
+        this.grid.dimensionsChange.emit({ dimensions: this.grid.pivotConfiguration.columns, dimensionCollectionType: PivotDimensionType.Row });
     }
 
     public valueRemoved(event: IBaseChipEventArgs) {
-        const value = this.grid.pivotConfiguration.values.find(x => x.member === event.owner.id);
+        const value = this.grid.pivotConfiguration.values.find(x => x.member === event.owner.id || x.displayName === event.owner.id);
         value.enabled = false;
         this.grid.setupColumns();
         this.grid.pipeTrigger++;
-        this.grid.valuesChange.emit({values: this.grid.pivotConfiguration.values});
+        this.grid.valuesChange.emit({ values: this.grid.pivotConfiguration.values });
     }
 
     public filterRemoved(event: IBaseChipEventArgs) {
         const filter = this.grid.pivotConfiguration.filters.find(x => x.memberName === event.owner.id);
         filter.enabled = false;
         this.grid.filteringService.clearFilter(filter.memberName);
         this.grid.pipeTrigger++;
-        this.grid.dimensionsChange.emit({dimensions: this.grid.pivotConfiguration.filters, dimensionCollectionType: PivotDimensionType.Filter});
+        this.grid.dimensionsChange.emit({ dimensions: this.grid.pivotConfiguration.filters, dimensionCollectionType: PivotDimensionType.Filter });
     }
 
     public onFilteringIconPointerDown(event) {
@@ -122,7 +122,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         event.preventDefault();
         let dim = dimension;
         let col;
-        while(dim) {
+        while (dim) {
             col = this.grid.dimensionDataColumns.find(x => x.field === dim.memberName || x.field === dim.member);
             if (col) {
                 break;
@@ -162,10 +162,10 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
             dimension.sortDirection = SortingDirection.None;
         }
         dimension.sortDirection = dimension.sortDirection + 1 > SortingDirection.Desc ?
-             SortingDirection.None : dimension.sortDirection + 1;
+            SortingDirection.None : dimension.sortDirection + 1;
         // apply same sort direction to children.
         let dim = dimension;
-        while(dim.childLevel) {
+        while (dim.childLevel) {
             dim.childLevel.sortDirection = dimension.sortDirection;
             dim = dim.childLevel;
         }
@@ -176,8 +176,9 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
     }
 
     public onDimDragOver(event, dimension?: PivotDimensionType) {
-        const typeMismatch = dimension !== undefined ? this.grid.pivotConfiguration.values.find(x => x.member === event.dragChip.id) :
-            !this.grid.pivotConfiguration.values.find(x => x.member === event.dragChip.id);
+        const typeMismatch = dimension !== undefined ? this.grid.pivotConfiguration.values.find(x => x.member === event.dragChip.id
+            || x.displayName === event.dragChip.id) :
+            !this.grid.pivotConfiguration.values.find(x => x.member === event.dragChip.id || x.displayName === event.dragChip.id);
         if (typeMismatch) {
             // cannot drag between dimensions and value
             return;
@@ -211,8 +212,8 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
 
     public onAreaDragEnter(event, area, dimension?: PivotDimensionType) {
         const dragId = event.detail.owner.element.nativeElement.parentElement.id;
-        const typeMismatch = dimension !== undefined ? this.grid.pivotConfiguration.values.find(x => x.member === dragId) :
-            !this.grid.pivotConfiguration.values.find(x => x.member === dragId);
+        const typeMismatch = dimension !== undefined ? this.grid.pivotConfiguration.values.find(x => x.member === dragId || x.displayName === dragId) :
+            !this.grid.pivotConfiguration.values.find(x => x.member === dragId || x.displayName === dragId);
         if (typeMismatch) {
             // cannot drag between dimensions and value
             return;
@@ -240,14 +241,15 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         const currentDim = this.grid.pivotConfiguration.values;
         const dragId = event.dragChip?.id || event.dragData?.chip.id;
         const chipsArray = area.chipsList.toArray();
-        const chipIndex = chipsArray.indexOf(event.owner) !== -1 ? chipsArray.indexOf(event.owner) : chipsArray.length;
-        const newDim = currentDim.find(x => x.member === dragId);
+        let chipIndex = chipsArray.indexOf(event.owner) !== -1 ? chipsArray.indexOf(event.owner) : chipsArray.length;
+        chipIndex = this._dropPos === DropPosition.AfterDropTarget ? chipIndex + 1 : chipIndex;
+        const newDim = currentDim.find(x => x.member === dragId || x.displayName === dragId);
         if (newDim) {
             const dragChipIndex = chipsArray.indexOf(event.dragChip || event.dragData.chip);
             currentDim.splice(dragChipIndex, 1);
-            currentDim.splice(dragChipIndex > chipIndex ? chipIndex : chipIndex - 1, 0, newDim);
+            currentDim.splice(dragChipIndex >= chipIndex ? chipIndex : chipIndex - 1, 0, newDim);
             this.grid.setupColumns();
-            this.grid.valuesChange.emit({values: this.grid.pivotConfiguration.values});
+            this.grid.valuesChange.emit({ values: this.grid.pivotConfiguration.values });
         }
     }
 
@@ -304,7 +306,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
             this.grid.setupColumns();
         }
         this.grid.pipeTrigger++;
-        this.grid.dimensionsChange.emit({dimensions: currentDim, dimensionCollectionType: dimension});
+        this.grid.dimensionsChange.emit({ dimensions: currentDim, dimensionCollectionType: dimension });
     }
 
     protected getDimensionsByType(dimension: PivotDimensionType) {

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

@@ -0,0 +1,22 @@
+import { DEFAULT_PIVOT_KEYS, IPivotDimension } from '../grids/pivot-grid/pivot-grid.interface';
+import { PivotUtil } from '../grids/pivot-grid/pivot-util';
+
+export class PivotGridFunctions {
+    /* Extract the value populated for each record for the given dimension and its children.*/
+    public static getDimensionData(data: any[], dimensions: IPivotDimension[]) {
+       return data.map(x => {
+           const obj = {};
+            for (let dim of dimensions) {
+                const dimData = PivotUtil.getDimensionLevel(dim, x, DEFAULT_PIVOT_KEYS);
+                const field = dimData.dimension.memberName;
+                const value = x[field];
+                obj[field] = value;
+            }
+            return obj;
+       });
+    }
+
+    public static checkUniqueValuesCount(data: any[], value: string, count:number) {
+        expect(data.filter(x => x === data).length).toBe(count);
+    }
+}