Update samples with additional combo from which you can add/remove extra dimensions.

Author: MKirova

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

@@ -481,6 +481,17 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         });
     }
 
+    /**
+     * Notifies for dimension change.
+     */
+    public notifyDimensionChange(regenerateColumns = false) {
+        if (regenerateColumns) {
+            this.setupColumns();
+        }
+        this.pipeTrigger++;
+        this.cdr.detectChanges();
+    }
+
     public uniqueDimensionValuesStrategy(column: IgxColumnComponent, exprTree: IFilteringExpressionsTree,
         done: (uniqueValues: any[]) => void) {
         const config = this.pivotConfiguration;

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

@@ -1,4 +1,9 @@
 <div class="sample-column">
+    <span>Dimensions:</span>
+    <igx-combo #combo class="combo" [itemsMaxHeight]="250" (selectionChanging)="handleChange($event)"
+        [data]="dimensions" [displayKey]="'memberName'" [(ngModel)]="selected"
+        placeholder="Dimension(s)" searchPlaceholder="Search...">
+    </igx-combo>
     <igx-pivot-grid #grid1 [data]="origData" [pivotConfiguration]="pivotConfigHierarchy">
     </igx-pivot-grid>
-</div>
+</div>

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

@@ -16,6 +16,6 @@
     }
 
     .sample-column {
-        max-width: 900px;
+        max-width: 1200px;
     }
 }

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

@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
-import { IgxPivotGridComponent, IgxPivotNumericAggregate, IPivotConfiguration } from 'igniteui-angular';
+import { IgxPivotGridComponent, IgxPivotNumericAggregate, IPivotConfiguration, IPivotDimension } from 'igniteui-angular';
 import { DATA } from '../shared/pivot-data';
 
 @Component({
@@ -12,43 +12,74 @@ import { DATA } from '../shared/pivot-data';
 export class PivotGridHierarchySampleComponent {
     @ViewChild('grid1', { static: true }) public grid1: IgxPivotGridComponent;
 
-    public pivotConfigHierarchy: IPivotConfiguration = {
-        columns: [{
-            memberName: 'All',
-            memberFunction: () => 'All',
+    public dimensions: IPivotDimension[] = [
+        {
+            memberName: 'AllSeller',
+            memberFunction: () => 'All Sellers',
+            enabled: true,
+            childLevel:
+            {
+                memberName: 'Seller',
+                memberFunction: (data) => data.Seller.Name,
+                enabled: true,
+            },
+        },
+        {
+            memberName: 'AllProduct',
+            memberFunction: () => 'All Products',
             enabled: true,
             childLevel:
             {
 
                 memberName: 'Product',
                 memberFunction: (data) => data.Product.Name,
-                enabled: true,
-                childLevel:
-                {
-                    memberName: 'City',
-                    memberFunction: (data) => data.Seller.City,
-                    enabled: true,
-                }
-
+                enabled: true
             }
         },
-        ],
-        rows: [{
-            memberName: 'AllSeller',
-            memberFunction: () => 'All',
+        {
+            memberName: 'City',
+            memberFunction: (data) => data.Seller.City,
             enabled: true,
-            childLevel:
-            {
-                memberName: 'Seller',
-                memberFunction: (data) => data.Seller.Name,
-                enabled: true,
+        },
+        {
+            memberName: 'Date',
+            enabled: true,
+        }
+    ];
+    public selected: IPivotDimension[] = [ this.dimensions[1], this.dimensions[2]];
+
+    public handleChange(event) {
+        let isColumnChange = false
+        const allDims = this.pivotConfigHierarchy.rows.concat(this.pivotConfigHierarchy.columns).concat(this.pivotConfigHierarchy.filters);
+        if (event.added.length > 0) {
+            const dim = allDims.find(x => x && x.memberName === event.added[0].memberName);
+            isColumnChange = this.pivotConfigHierarchy.columns.indexOf(dim) !== -1;
+            if (dim) {
+                dim.enabled = true;
+            } else {
+                // add as row by default
+                this.pivotConfigHierarchy.rows = this.pivotConfigHierarchy.rows.concat(event.added);
             }
-        }],
+        } else if (event.removed.length > 0) {
+            const dims = allDims.filter(x => x && event.removed.indexOf(x) !== -1);
+            dims.forEach(x => x.enabled = false);
+            isColumnChange = dims.some(x => this.pivotConfigHierarchy.columns.indexOf(x) !== -1);
+        }
+        this.grid1.notifyDimensionChange(isColumnChange);
+    }
+
+    public pivotConfigHierarchy: IPivotConfiguration = {
+        columns: [
+            this.dimensions[2]
+        ],
+        rows: [
+            this.dimensions[1]
+        ],
         values: [
             {
                 member: 'NumberOfUnits',
                 aggregate: {
-                    aggregator:  IgxPivotNumericAggregate.sum,
+                    aggregator: IgxPivotNumericAggregate.sum,
                     key: 'sum',
                     label: 'Sum'
                 },
@@ -57,7 +88,7 @@ export class PivotGridHierarchySampleComponent {
             }, {
                 member: 'Value',
                 aggregate: {
-                    aggregator:  IgxPivotNumericAggregate.sum,
+                    aggregator: IgxPivotNumericAggregate.sum,
                     key: 'sum',
                     label: 'Sum'
                 },

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

@@ -1,4 +1,9 @@
 <div class="sample-column">
+    <span>Dimensions:</span>
+    <igx-combo #combo class="combo" [itemsMaxHeight]="250" (selectionChanging)="handleChange($event)"
+        [data]="dimensions" [displayKey]="'memberName'" [(ngModel)]="selected"
+        placeholder="Dimension(s)" searchPlaceholder="Search...">
+    </igx-combo>
     <igx-pivot-grid #grid1 [data]="origData" [width]="'100%'" [height]="'100%'" [pivotConfiguration]="pivotConfigHierarchy">
     </igx-pivot-grid>
 </div>

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

@@ -1,10 +1,12 @@
+import { trigger } from '@angular/animations';
 import { Component, ViewChild } from '@angular/core';
 import {
     IgxPivotNumericAggregate,
     IgxPivotGridComponent,
     IPivotConfiguration,
     PivotAggregation,
-    IgxPivotDateDimension
+    IgxPivotDateDimension,
+    IPivotDimension
 } from 'igniteui-angular';
 import { HIERARCHICAL_SAMPLE_DATA } from '../shared/sample-data';
 
@@ -42,38 +44,50 @@ export class IgxTotalSaleAggregate {
 export class PivotGridSampleComponent {
     @ViewChild('grid1', { static: true }) public grid1: IgxPivotGridComponent;
 
-    public pivotConfigHierarchy: IPivotConfiguration = {
-        columns: [
-            {
-                memberName: 'Country',
-                enabled: true
-            }
-        ],
-        rows: [
-
-            new IgxPivotDateDimension(
-                {
-                    memberName: 'Date',
-                    enabled: true
-                },
-                {
-                    months: false
-                }
-            ),
+    public dimensions: IPivotDimension[] = [
+        {
+            memberName: 'Country',
+            enabled: true
+        },
+        new IgxPivotDateDimension(
             {
-                memberName: 'City',
+                memberName: 'Date',
                 enabled: true
             },
             {
-                memberFunction: () => 'All',
-                memberName: 'AllProducts',
+                months: false
+            }
+        ),
+        {
+            memberFunction: () => 'All',
+            memberName: 'AllProducts',
+            enabled: true,
+            childLevel: {
+                memberFunction: (data) => data.ProductCategory,
+                memberName: 'ProductCategory',
+                enabled: true
+            }
+        },
+        {
+            memberName: 'AllSeller',
+            memberFunction: () => 'All Sellers',
+            enabled: true,
+            childLevel: {
                 enabled: true,
-                childLevel: {
-                    memberFunction: (data) => data.ProductCategory,
-                    memberName: 'ProductCategory',
-                    enabled: true
-                }
+                memberName: 'Seller'
             }
+        },
+    ];
+
+    public selected: IPivotDimension[] = [this.dimensions[0], this.dimensions[1], this.dimensions[2]];
+
+    public pivotConfigHierarchy: IPivotConfiguration = {
+        columns: [
+            this.dimensions[0]
+        ],
+        rows: [
+            this.dimensions[1],
+            this.dimensions[2]
         ],
         values: [
             {
@@ -152,4 +166,24 @@ export class PivotGridSampleComponent {
             ProductCategory: 'Components', UnitPrice: 16.05, SellerName: 'Walter Pang',
             Country: 'Bulgaria', City: 'Sofia', Date: '02/19/2013', UnitsSold: 492
         }];
+
+        public handleChange(event) {
+            let isColumnChange = false
+            const allDims = this.pivotConfigHierarchy.rows.concat(this.pivotConfigHierarchy.columns).concat(this.pivotConfigHierarchy.filters);
+            if (event.added.length > 0) {
+                const dim = allDims.find(x => x && x.memberName === event.added[0].memberName);
+                isColumnChange = this.pivotConfigHierarchy.columns.indexOf(dim) !== -1;
+                if (dim) {
+                    dim.enabled = true;
+                } else {
+                    // add as row by default
+                    this.pivotConfigHierarchy.rows = this.pivotConfigHierarchy.rows.concat(event.added);
+                }
+            } else if (event.removed.length > 0) {
+                const dims = allDims.filter(x => x && event.removed.indexOf(x) !== -1);
+                dims.forEach(x => x.enabled = false);
+                isColumnChange = dims.some(x => this.pivotConfigHierarchy.columns.indexOf(x) !== -1);
+            }
+            this.grid1.notifyDimensionChange(isColumnChange);
+        }
 }