chore(*): fixing the igx-pivot-grid in the pdf demo

Author: Konstantin Dinev

src/app/grid-pdf-export/grid-pdf-export.sample.html

@@ -128,14 +128,11 @@ <h3>Pivot Grid (with Aggregated Data)</h3>
             </button>
         </div>
 
-        <igx-pivot-grid #pivotGrid [data]="pivotGridData" [autoGenerate]="false" height="500px" width="100%">
-            <igx-pivot-configuration>
-                <igx-pivot-row pivotKeys='["Product", "Region"]'></igx-pivot-row>
-                <igx-pivot-column pivotKeys='["Quarter"]'></igx-pivot-column>
-                <igx-pivot-value field="Sales" aggregate="sum" displayName="Total Sales"></igx-pivot-value>
-                <igx-pivot-value field="Units" aggregate="sum" displayName="Total Units"></igx-pivot-value>
-            </igx-pivot-configuration>
-        </igx-pivot-grid>
+        <div style="display: flex">
+            <igx-pivot-grid #pivotGrid [data]="pivotGridData" [autoGenerateConfig]="true" height="850px" width="80%">
+            </igx-pivot-grid>
+            <igx-pivot-data-selector [grid]="pivotGrid"></igx-pivot-data-selector>
+        </div>
     </div>
 
     <div class="info-section">

src/app/grid-pdf-export/grid-pdf-export.sample.ts

@@ -15,7 +15,9 @@ import {
     IgxInputGroupComponent,
     IgxLabelDirective,
     IgxInputDirective,
-    IgxColumnGroupComponent
+    IgxColumnGroupComponent,
+    IgxPivotGridComponent,
+    IgxPivotDataSelectorComponent
 } from 'igniteui-angular';
 
 @Component({
@@ -28,6 +30,8 @@ import {
         IgxColumnGroupComponent,
         IgxTreeGridComponent,
         IgxHierarchicalGridComponent,
+        IgxPivotGridComponent,
+        IgxPivotDataSelectorComponent,
         IgxRowIslandComponent,
         IgxButtonDirective,
         IgxSwitchComponent,
@@ -52,6 +56,9 @@ export class GridPdfExportSampleComponent {
     @ViewChild('hierarchicalGrid', { static: true })
     public hierarchicalGrid: IgxHierarchicalGridComponent;
 
+    @ViewChild('pivotGrid', { static: true })
+    public pivotGrid: IgxPivotGridComponent;
+
     // Grid data
     public gridData = [
         { ID: 1, Name: 'Product A', Category: 'Electronics', Price: 299.99, InStock: true, LaunchDate: new Date(2023, 0, 15) },
@@ -119,6 +126,33 @@ export class GridPdfExportSampleComponent {
         }
     ];
 
+    public pivotGridData = [
+        {
+            ProductCategory: 'Clothing', UnitPrice: 12.81, SellerName: 'Stanley',
+            Country: 'Bulgaria', City: 'Sofia', Date: '01/01/2021', UnitsSold: 282
+        },
+        {
+            ProductCategory: 'Clothing', UnitPrice: 49.57, SellerName: 'Elisa',
+            Country: 'USA', City: 'New York', Date: '01/05/2019', UnitsSold: 296
+        },
+        {
+            ProductCategory: 'Bikes', UnitPrice: 3.56, SellerName: 'Lydia',
+            Country: 'Uruguay', City: 'Ciudad de la Costa', Date: '01/06/2020', UnitsSold: 68
+        },
+        {
+            ProductCategory: 'Accessories', UnitPrice: 85.58, SellerName: 'David',
+            Country: 'USA', City: 'New York', Date: '04/07/2021', UnitsSold: 293
+        },
+        {
+            ProductCategory: 'Components', UnitPrice: 18.13, SellerName: 'John',
+            Country: 'USA', City: 'New York', Date: '12/08/2021', UnitsSold: 240
+        },
+        {
+            ProductCategory: 'Clothing', UnitPrice: 68.33, SellerName: 'Larry',
+            Country: 'Uruguay', City: 'Ciudad de la Costa', Date: '05/12/2020', UnitsSold: 456
+        }
+    ];
+
     // Export options
     public fileName = 'GridExport';
     public pageOrientation: 'portrait' | 'landscape' = 'landscape';
@@ -144,6 +178,12 @@ export class GridPdfExportSampleComponent {
         this.pdfExporter.export(this.hierarchicalGrid, options);
     }
 
+    public exportPivotGrid() {
+        const options = this.createExportOptions();
+        options.fileName = `PivotGrid_${this.fileName}`;
+        this.pdfExporter.export(this.pivotGrid, options);
+    }
+
     private createExportOptions(): IgxPdfExporterOptions {
         const options = new IgxPdfExporterOptions(this.fileName);
         options.pageOrientation = this.pageOrientation;

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

@@ -70,10 +70,10 @@
             [rowSelection]="'single'"
             [autoGenerateConfig]="true"
         >
-        <ng-template igxPivotValueChip let-value>
-            {{ value.displayName }}
-       </ng-template>
-    </igx-pivot-grid>
+            <ng-template igxPivotValueChip let-value>
+                {{ value.displayName }}
+            </ng-template>
+        </igx-pivot-grid>
     </div>
     <igx-pivot-data-selector [grid]="grid1"></igx-pivot-data-selector>
 </div>