Update based on new interface for PivotDimensions.

Author: MKirova

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

@@ -9,14 +9,14 @@
             </div>
             <!-- Filter area -->
             <igx-chips-area #filterArea droppable='true' style="width:fit-content; height: 100%;">
-                <igx-chip *ngFor="let filter of grid.filterDimensions" [id]="filter.fieldName" [draggable]="true"
+                <igx-chip *ngFor="let filter of grid.filterDimensions" [id]="filter.memberName" [draggable]="true"
                     [removable]="true" (remove)="filterRemoved($event)"
                     (dragOver)="onDimDragOver($event, 2)"
                     (dragLeave)="onDimDragLeave($event)"
                     (dragDrop)="onDimDrop($event, filterArea, 2)"
                      >
                     <igx-icon igxPrefix>filter_list</igx-icon>
-                    {{filter.fieldName}}
+                    {{filter.memberName}}
                 </igx-chip>
             </igx-chips-area>
         </div>
@@ -29,14 +29,14 @@
                 </div>
                 <!-- Columns area -->
                 <igx-chips-area #colArea droppable='true' style="width:fit-content; height: 100%;">
-                    <igx-chip *ngFor="let col of grid.columnDimensions" [draggable]="'true'" [id]="col.fieldName"
+                    <igx-chip *ngFor="let col of grid.columnDimensions" [draggable]="'true'" [id]="col.memberName"
                         [removable]="true" (remove)="columnRemoved($event)"
                         (dragOver)="onDimDragOver($event, 1)"
                         (dragLeave)="onDimDragLeave($event)"
                         (dragDrop)="onDimDrop($event, colArea, 1)">
                         <igx-icon igxPrefix>view_column</igx-icon>
                         <igx-icon igxPrefix>filter_list</igx-icon>
-                        {{col.fieldName}}
+                        {{col.memberName}}
                     </igx-chip>
                 </igx-chips-area>
             </div>
@@ -79,14 +79,14 @@
                 </div>
                 <!-- Row area -->
                 <igx-chips-area #rowArea droppable='true' style="width:fit-content; height: 100%;">
-                    <igx-chip *ngFor="let row of grid.rowDimensions" [draggable]="'true'" [id]="row.fieldName"
+                    <igx-chip *ngFor="let row of grid.rowDimensions" [draggable]="'true'" [id]="row.memberName"
                         [removable]="true" (remove)="rowRemoved($event)"
                         (dragLeave)="onDimDragLeave($event)"
                         (dragDrop)="onDimDrop($event, rowArea, 0)"
                         (dragOver)="onDimDragOver($event, 0)">
                         <igx-icon igxPrefix>table_rows</igx-icon>
                         <igx-icon igxPrefix>filter_list</igx-icon>
-                        {{ row.fieldName}}
+                        {{ row.memberName}}
                     </igx-chip>
                 </igx-chips-area>
             </div>

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

@@ -51,13 +51,13 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
     }
 
     public rowRemoved(event: IBaseChipEventArgs) {
-        const row = this.grid.pivotConfiguration.rows.find(x => x.fieldName === event.owner.id);
+        const row = this.grid.pivotConfiguration.rows.find(x => x.memberName === event.owner.id);
         row.enabled = false;
         this.grid.pipeTrigger++;
     }
 
     public columnRemoved(event: IBaseChipEventArgs) {
-        const col = this.grid.pivotConfiguration.columns.find(x => x.fieldName === event.owner.id);
+        const col = this.grid.pivotConfiguration.columns.find(x => x.memberName === event.owner.id);
         col.enabled = false;
         this.grid.setupColumns();
         this.grid.pipeTrigger++;
@@ -71,7 +71,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
     }
 
     public filterRemoved(event: IBaseChipEventArgs) {
-        const filter = this.grid.pivotConfiguration.filters.find(x => x.fieldName === event.owner.id);
+        const filter = this.grid.pivotConfiguration.filters.find(x => x.memberName === event.owner.id);
         filter.enabled = false;
     }
 
@@ -157,15 +157,15 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         const chip = chipsArray.find(x => x.id === dragId);
         const isNewChip = chip === undefined;
         //const chipIndex = chipsArray.indexOf(event.owner) !== -1 ? chipsArray.indexOf(event.owner) : chipsArray.length;
-        const chipIndex = currentDim.findIndex(x => x.fieldName === event.owner.id) !== -1 ?
-        currentDim.findIndex(x => x.fieldName === event.owner.id) : currentDim.length;
+        const chipIndex = currentDim.findIndex(x => x.memberName === event.owner.id) !== -1 ?
+        currentDim.findIndex(x => x.memberName === event.owner.id) : currentDim.length;
         const targetIndex = this._dropPos === DropPosition.AfterDropTarget ? chipIndex + 1 : chipIndex;
         if (isNewChip) {
             const allDims = this.grid.pivotConfiguration.rows
             .concat(this.grid.pivotConfiguration.columns)
             .concat(this.grid.pivotConfiguration.filters);
             // chip moved from external collection
-            const dims = allDims.filter(x => x && x.fieldName === dragId);
+            const dims = allDims.filter(x => x && x.memberName === dragId);
             if (dims.length === 0) {
                 // you have dragged something that is not a dimension
                 return;
@@ -174,7 +174,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
                 element.enabled = false;
             });
 
-            const currentDimChild = currentDim.find(x => x && x.fieldName === dragId);
+            const currentDimChild = currentDim.find(x => x && x.memberName === dragId);
             if (currentDimChild) {
                 currentDimChild.enabled = true;
                 const dragChipIndex = currentDim.indexOf(currentDimChild);
@@ -185,16 +185,16 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
                 newDim.enabled = true;
                 currentDim.splice(chipIndex, 0, newDim);
             }
-            const isDraggedFromColumn = !!this.grid.pivotConfiguration.columns?.find(x => x && x.fieldName === dragId);
+            const isDraggedFromColumn = !!this.grid.pivotConfiguration.columns?.find(x => x && x.memberName === dragId);
             if (isDraggedFromColumn) {
                 // columns have changed.
                 this.grid.setupColumns();
             }
         } else {
             // chip from same collection, reordered.
-            const newDim = currentDim.find(x => x.fieldName === dragId);
+            const newDim = currentDim.find(x => x.memberName === dragId);
             //const dragChipIndex = chipsArray.indexOf(event.dragChip || event.dragData.chip);
-            const dragChipIndex = currentDim.findIndex(x => x.fieldName === dragId);
+            const dragChipIndex = currentDim.findIndex(x => x.memberName === dragId);
             currentDim.splice(dragChipIndex, 1);
             currentDim.splice(dragChipIndex > chipIndex ? targetIndex : targetIndex - 1, 0, newDim);
         }

src/app/pivot-grid-hierarchy/pivot-grid-hierarchy.sample.ts

@@ -14,28 +14,33 @@ export class PivotGridHierarchySampleComponent {
 
     public pivotConfigHierarchy: IPivotConfiguration = {
         columns: [{
-            member: () => 'All',
+            memberName: 'All',
+            memberFunction: () => 'All',
             enabled: true,
             childLevel:
             {
 
-                member: (data) => data.Product.Name,
+                memberName: 'Product',
+                memberFunction: (data) => data.Product.Name,
                 enabled: true,
                 childLevel:
                 {
-                    member: (data) => data.Seller.City,
+                    memberName: 'City',
+                    memberFunction: (data) => data.Seller.City,
                     enabled: true,
                 }
 
             }
         },
         ],
         rows: [{
-            member: () => 'All',
+            memberName: 'AllSeller',
+            memberFunction: () => 'All',
             enabled: true,
             childLevel:
             {
-                member: (data) => data.Seller.Name,
+                memberName: 'Seller',
+                memberFunction: (data) => data.Seller.Name,
                 enabled: true,
             }
         }],