chore(*): In case of removing/toggling/moving a dimension/value that is not in the collections do nothing. You can only insert new dimensions/values.

Author: MKirova

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

@@ -777,7 +777,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     }
 
     public get values() {
-        return this.pivotConfiguration.values.filter(x => x.enabled);
+        return this.pivotConfiguration.values.filter(x => x.enabled) || [];
     }
 
     public toggleColumn(col: IgxColumnComponent) {
@@ -1076,6 +1076,9 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         }
         this.pipeTrigger++;
         this.dimensionsChange.emit({ dimensions: targetCollection, dimensionCollectionType: targetCollectionType });
+        if (targetCollectionType === PivotDimensionType.Filter) {
+            this.reflow();
+        }
     }
 
     /**
@@ -1091,6 +1094,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
      * This parameter is optional. If not set it will add it to the end of the collection.
      */
     public moveDimension(dimension: IPivotDimension, targetCollectionType: PivotDimensionType, index?: number) {
+        const prevCollectionType = this.getDimensionType(dimension);
+        if (prevCollectionType === null) return;
         // remove from old collection
         this.removeDimension(dimension);
         // add to target
@@ -1110,6 +1115,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
      */
     public removeDimension(dimension: IPivotDimension) {
         const prevCollectionType = this.getDimensionType(dimension);
+        if (prevCollectionType === null) return;
         const prevCollection = this.getDimensionsByType(prevCollectionType);
         const currentIndex = prevCollection.indexOf(dimension);
         prevCollection.splice(currentIndex, 1);
@@ -1134,6 +1140,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
      */
     public toggleDimension(dimension: IPivotDimension) {
         const dimType = this.getDimensionType(dimension);
+        if (dimType === null) return;
         const collection = this.getDimensionsByType(dimType);
         dimension.enabled = !dimension.enabled;
         if (dimType === PivotDimensionType.Column) {
@@ -1184,6 +1191,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
      * This parameter is optional. If not set it will add it to the end of the collection.
      */
     public moveValue(value: IPivotValue, index?: number) {
+        if (this.pivotConfiguration.values.indexOf(value) === -1) return;
         // remove from old index
         this.removeValue(value);
         // add to new
@@ -1204,10 +1212,12 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     public removeValue(value: IPivotValue,) {
         const values = this.pivotConfiguration.values;
         const currentIndex = values.indexOf(value);
-        values.splice(currentIndex, 1);
-        this.setupColumns();
-        this.pipeTrigger++;
-        this.valuesChange.emit({ values });
+        if (currentIndex !== -1) {
+            values.splice(currentIndex, 1);
+            this.setupColumns();
+            this.pipeTrigger++;
+            this.valuesChange.emit({ values });
+        }
     }
 
     /**
@@ -1221,6 +1231,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
      * @param value The value to be toggled.
      */
     public toggleValue(value: IPivotValue) {
+        if (this.pivotConfiguration.values.indexOf(value) === -1) return;
         value.enabled = !value.enabled;
         this.setupColumns();
         this.pipeTrigger++;
@@ -1255,7 +1266,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
 
     protected getDimensionType(dimension: IPivotDimension): PivotDimensionType {
         return PivotUtil.flatten(this.rowDimensions).indexOf(dimension) !== -1 ? PivotDimensionType.Row :
-            PivotUtil.flatten(this.columnDimensions).indexOf(dimension) !== -1 ? PivotDimensionType.Column : PivotDimensionType.Filter;
+            PivotUtil.flatten(this.columnDimensions).indexOf(dimension) !== -1 ? PivotDimensionType.Column :
+            PivotUtil.flatten(this.columnDimensions).indexOf(dimension) !== -1 ? PivotDimensionType.Filter : null;
     }
 
     protected getLargesContentWidth(contents: ElementRef[]): string {

src/app/pivot-grid/pivot-grid.sample.html

@@ -11,8 +11,15 @@
         </igx-buttongroup>
     </div>
     <button igxButton (click)="setRowDimWidth(0, '400px')">ResizeRowDim</button>
-    <button (click)='autoSizeRow(0)'>AutoSize Row 0</button>
-    <button (click)='autoSizeRow(1)'>AutoSize Row 1</button>
+    <button (click)='remove()'>Remove</button>
+    <button (click)='toggle()'>Toggle</button>
+    <button (click)='move()'>Move</button>
+    <button (click)='insert()'>Insert</button>
+
+    <button (click)='removeVal()'>Remove</button>
+    <button (click)='toggleVal()'>Toggle</button>
+    <button (click)='moveVal()'>Move</button>
+    <button (click)='insertVal()'>Insert</button>
 </div>
 
 <igx-pivot-grid #grid1 [data]="origData" [width]="'100%'" [height]="'100%'" [defaultExpandState]='true'

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

@@ -11,7 +11,8 @@ import {
     DisplayDensity,
     FilteringExpressionsTree,
     FilteringLogic,
-    IgxStringFilteringOperand
+    IgxStringFilteringOperand,
+    PivotDimensionType
 } from 'igniteui-angular';
 import { HIERARCHICAL_SAMPLE_DATA } from '../shared/sample-data';
 
@@ -237,4 +238,56 @@ export class PivotGridSampleComponent {
 
         this.grid1.pivotConfiguration = newPivotConfig;
     }
+
+    public remove(){
+        this.grid1.removeDimension({memberName: 'test', enabled: true});
+    }
+
+    public toggle(){
+        this.grid1.toggleDimension({memberName: 'test', enabled: true});
+    }
+
+    public move(){
+        this.grid1.moveDimension({memberName: 'test', enabled: true}, PivotDimensionType.Filter, 0);
+    }
+
+    public insert(){
+        this.grid1.insertDimensionAt({
+            memberName: 'Country',
+            enabled: true
+        }, PivotDimensionType.Filter, 0);
+    }
+
+
+    public removeVal(){
+        this.grid1.removeValue({member: 'test', enabled: true, aggregate: {
+            key: 'SUM',
+            aggregator: IgxPivotNumericAggregate.sum,
+            label: 'Sum'
+        } });
+    }
+
+    public toggleVal(){
+        this.grid1.toggleValue({member: 'test', enabled: true, aggregate: {
+            key: 'SUM',
+            aggregator: IgxPivotNumericAggregate.sum,
+            label: 'Sum'
+        } });
+    }
+
+    public moveVal(){
+        this.grid1.moveValue({member: 'test', enabled: true, aggregate: {
+            key: 'SUM',
+            aggregator: IgxPivotNumericAggregate.sum,
+            label: 'Sum'
+        } }, 0);
+    }
+
+    public insertVal(){
+        this.grid1.insertValueAt({member: 'test', enabled: true, aggregate: {
+            key: 'SUM',
+            aggregator: IgxPivotNumericAggregate.sum,
+            label: 'Sum'
+        } }, 0);
+    }
 }