fix(pivotGrid): Update pivot grid correctly on pivotUI settings change.

Author: skrustev

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

@@ -357,6 +357,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
      */
     public set pivotUI(value: IPivotUISettings) {
         this._pivotUI = Object.assign(this._pivotUI, value || {});
+        this.pipeTrigger++;
+        this.notifyChanges(true);
     }
 
     public get pivotUI() {

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

@@ -1,6 +1,9 @@
 <div class="sample-flex-row">
     <button igxButton="outlined" (click)="saveState()">SAVE STATE</button>
     <button igxButton="contained" (click)="restoreState()">RESTORE STATE</button>
+    <button igxButton="contained" (click)="export()">EXPORT</button>
+    <igx-switch [checked]="pivotUI.showRowHeaders" (change)="onShowHeadersToggle($event)">Show headers</igx-switch>
+    <igx-switch [checked]="pivotUI.rowLayout === 'horizontal'" (change)="onLayoutToggle($event)">Horizontal layout</igx-switch>
 <div class="pivot-container">
     <div>
         <igx-pivot-grid

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

@@ -14,7 +14,11 @@ import {
     IgxPivotDataSelectorComponent,
     IgxPivotRowDimensionHeaderTemplateDirective,
     IPivotUISettings,
-    PivotRowLayoutType
+    PivotRowLayoutType,
+    IgxExcelExporterService,
+    IgxExcelExporterOptions,
+    IgxSwitchComponent,
+    IChangeCheckboxEventArgs
 } from 'igniteui-angular';
 
 export class IgxTotalSaleAggregate {
@@ -50,7 +54,7 @@ export class IgxTotalSaleAggregate {
     styleUrls: ['pivot-grid-state.sample.scss'],
     templateUrl: 'pivot-grid-state.sample.html',
     standalone: true,
-    imports: [FormsModule, IgxButtonDirective,
+    imports: [FormsModule, IgxButtonDirective, IgxSwitchComponent,
         IgxPivotGridComponent, IgxGridStateDirective, IgxPivotDataSelectorComponent, IgxPivotRowDimensionHeaderTemplateDirective ]
 })
 export class PivotGridStateSampleComponent {
@@ -70,12 +74,6 @@ export class PivotGridStateSampleComponent {
             ),
         ],
         rows: [
-            // {
-            //     memberName: 'AllSellers',
-            //     displayName: 'All Sellers',
-            //     memberFunction: () => 'All',
-            //     enabled: true
-            // },
             {
                 memberName: 'Country',
                 displayName: 'Country',
@@ -171,6 +169,8 @@ export class PivotGridStateSampleComponent {
     @ViewChild(IgxGridStateDirective, { static: true })
     public state!: IgxGridStateDirective;
 
+    constructor(private exportService: IgxExcelExporterService) {}
+
     public saveState() {
         const state = this.state.getState() as string;
         window.sessionStorage.setItem('grid-state', state);
@@ -194,5 +194,17 @@ export class PivotGridStateSampleComponent {
         }
     }
 
+    public export() {
+        this.exportService.export(this.grid1, new IgxExcelExporterOptions('ExportedFile'));
+    }
 
+    public onShowHeadersToggle(event: IChangeCheckboxEventArgs) {
+        this.pivotUI.showRowHeaders = event.checked;
+        this.grid1.pivotUI = this.pivotUI;
+    }
+
+    public onLayoutToggle(event: IChangeCheckboxEventArgs) {
+        this.pivotUI.rowLayout = event.checked ? PivotRowLayoutType.Horizontal : PivotRowLayoutType.Vertical;
+        this.grid1.pivotUI = this.pivotUI;
+    }
 }