dartagrid

src/app/portal-manage/dashboard-management/dashboard-management.component.ts

@@ -360,15 +360,21 @@ export class DashboardManagementComponent implements OnInit {
   mapWidgetsToPanels(widgets: WidgetModel[]): DashboardPanel[] {
     return widgets.map(widget => {
       // Ensure config is an object before passing to component
-      let configObject = {};
+      let configObject: any = {}; // Use any to easily add properties
       if (typeof widget.config === 'string') {
         try {
           configObject = JSON.parse(widget.config);
         } catch (e) {
           console.error('Error parsing widget config string:', widget.config, e);
         }
-      } else if (typeof widget.config === 'object') {
-        configObject = widget.config;
+      } else if (typeof widget.config === 'object' && widget.config !== null) {
+        configObject = { ...widget.config }; // Create a shallow copy
+      }
+
+      // Inject widgetId and perspective into the config for the component
+      configObject.widgetId = widget.widgetId;
+      if (widget.perspective) {
+        configObject.perspective = widget.perspective;
       }
 
       return {

src/app/portal-manage/widgets/syncfusion-datagrid-widget/syncfusion-datagrid-widget.component.ts

-import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
+import { Component, ViewChild, OnInit, OnDestroy, AfterViewInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { GridModule, PageService, SortService, FilterService, GroupService, ToolbarService, ExcelExportService, PdfExportService, GridComponent, ToolbarItems, SearchSettingsModel, GroupSettingsModel, FilterSettingsModel, SelectionSettingsModel, AggregateService, ColumnMenuService, DetailRowService, ReorderService, EditService, ColumnMenuClickEventArgs, PdfExportProperties, ExcelExportProperties, LoadingIndicatorModel, Column,SearchService } from '@syncfusion/ej2-angular-grids';
 import { ClickEventArgs } from '@syncfusion/ej2-navigations';
@@ -55,7 +55,7 @@ L10n.load({
   providers: [PageService, SortService, FilterService, GroupService, ToolbarService, ExcelExportService, PdfExportService, AggregateService, ColumnMenuService, DetailRowService, ReorderService, EditService, SearchService],
   templateUrl: './syncfusion-datagrid-widget.component.html',
 })
-export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent implements OnInit, OnDestroy, StatefulWidget {
+export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent implements OnInit, OnDestroy, StatefulWidget, AfterViewInit {
   @ViewChild('grid') public grid: GridComponent;
 
   public widgetId: string; // Added widgetId property
@@ -103,6 +103,14 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
     }
   }
 
+  ngAfterViewInit(): void {
+    // Apply saved perspective if available
+    // We do this in AfterViewInit to ensure the @ViewChild('grid') is available.
+    if (this.config.perspective) {
+      this.setWidgetState(this.config.perspective);
+    }
+  }
+
   applyInitialConfig(): void {
     this.title = this.config.title || 'Data Grid';
     this.columns = this.config.columns || [];
@@ -133,11 +141,6 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
     this.allowReordering = this.config.allowReordering !== undefined ? this.config.allowReordering : true;
     this.showColumnMenu = this.config.showColumnMenu !== undefined ? this.config.showColumnMenu : true;
     this.allowMultiSorting = this.config.allowMultiSorting !== undefined ? this.config.allowMultiSorting : true;
-
-    // Apply saved perspective if available
-    if (this.config.perspective && this.grid) {
-      this.setWidgetState(this.config.perspective);
-    }
   }
 
   /**
@@ -157,8 +160,13 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
    * @param state A JSON string representing the grid's state.
    */
   setWidgetState(state: string): void {
-    if (this.grid && state) {
-      (this.grid as any).setPersistData(state); // Cast to any
+    if (this.grid && state && state !== '{}') {
+      try {
+        const stateObj = JSON.parse(state);
+        (this.grid as any).setPersistData(stateObj); // Pass object instead of string
+      } catch (e) {
+        console.error("Error parsing perspective state for grid:", e);
+      }
     }
   }
 

src/app/portal-manage/widgets/syncfusion-pivot-widget/syncfusion-pivot-widget.component.ts

-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, OnDestroy, OnInit, AfterViewInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PivotViewModule, IDataSet, FieldListService, CalculatedFieldService, ToolbarService, GroupingBarService, ConditionalFormattingService, PivotViewComponent, PDFExportService, ExcelExportService, ToolbarItems, PivotChartService, DisplayOption } from '@syncfusion/ej2-angular-pivotview';
 import { ChartSettingsModel } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartsettings-model';
@@ -6,6 +6,7 @@ import { ClickEventArgs } from '@syncfusion/ej2-navigations';
 import { DataManager } from '@syncfusion/ej2-data';
 import { DashboardStateService } from '../../services/dashboard-state.service';
 import { BaseWidgetComponent } from '../base-widget.component';
+import { WidgetStateService, StatefulWidget } from '../../services/widget-state.service';
 
 @Component({
   selector: 'app-syncfusion-pivot-widget',
@@ -14,9 +15,11 @@ import { BaseWidgetComponent } from '../base-widget.component';
   providers: [FieldListService, CalculatedFieldService, ToolbarService, GroupingBarService, ConditionalFormattingService, ExcelExportService, PDFExportService, PivotChartService],
   templateUrl: './syncfusion-pivot-widget.component.html',
 })
-export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent {
+export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent implements OnInit, OnDestroy, StatefulWidget, AfterViewInit {
   @ViewChild('pivotview') public pivotview: PivotViewComponent;
 
+  public widgetId: string;
+
   public dataSourceSettings: {
     dataSource: DataManager;
     expandAll: boolean;
@@ -37,15 +40,36 @@ export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent {
   public displayOption: DisplayOption;
   public chartSettings: ChartSettingsModel;
 
-
-  constructor(protected override dashboardStateService: DashboardStateService) {
+  constructor(
+    protected override dashboardStateService: DashboardStateService,
+    private widgetStateService: WidgetStateService
+  ) {
     super(dashboardStateService);
   }
 
   override ngOnInit(): void {
-    this.toolbar = ['Grid', 'Chart', 'Export', 'SubTotal', 'GrandTotal', 'ConditionalFormatting', 'NumberFormatting', 'FieldList']
-    this.displayOption = { view: 'Both' } as DisplayOption;
     super.ngOnInit();
+    if (this.config && this.config.widgetId) {
+      this.widgetId = this.config.widgetId;
+      this.widgetStateService.registerWidget(this.widgetId, this);
+    }
+    this.toolbar = ['Grid', 'Chart', 'Export', 'SubTotal', 'GrandTotal', 'ConditionalFormatting', 'NumberFormatting', 'FieldList'];
+    this.displayOption = { view: 'Both' } as DisplayOption;
+  }
+
+  override ngOnDestroy(): void {
+    super.ngOnDestroy();
+    if (this.widgetId) {
+      this.widgetStateService.unregisterWidget(this.widgetId);
+    }
+  }
+
+  ngAfterViewInit(): void {
+    // Apply saved perspective if available
+    // We do this in AfterViewInit to ensure the @ViewChild('pivotview') is available.
+    if (this.config.perspective) {
+      this.setWidgetState(this.config.perspective);
+    }
   }
 
   applyInitialConfig(): void {
@@ -64,11 +88,49 @@ export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent {
     };
   }
 
+  getWidgetState(): string | null {
+    if (this.pivotview && this.pivotview.dataSourceSettings) {
+      const report = this.pivotview.dataSourceSettings;
+      const perspective = {
+        rows: report.rows?.map(r => ({ name: r.name })) || [],
+        columns: report.columns?.map(c => ({ name: c.name })) || [],
+        values: report.values?.map(v => ({ name: v.name, type: v.type })) || [],
+        filters: report.filters?.map(f => ({ name: f.name })) || [],
+      };
+      return JSON.stringify(perspective);
+    }
+    return null;
+  }
+
+  setWidgetState(state: string): void {
+    if (state && state !== '{}') {
+      try {
+        const perspective = JSON.parse(state);
+        this.dataSourceSettings = {
+          ...this.dataSourceSettings,
+          rows: perspective.rows || [],
+          columns: perspective.columns || [],
+          values: perspective.values || [],
+          filters: perspective.filters || [],
+        };
+        if (this.pivotview) {
+          this.pivotview.dataSourceSettings = this.dataSourceSettings;
+        }
+      } catch (e) {
+        console.error('Error applying pivot perspective state:', e);
+      }
+    }
+  }
+
   onDataUpdate(data: IDataSet[]): void {
     this.dataSourceSettings = {
       ...this.dataSourceSettings,
       dataSource: new DataManager(data)
     };
+    if (this.pivotview) {
+      this.pivotview.dataSourceSettings.dataSource = new DataManager(data);
+      this.pivotview.refresh();
+    }
   }
 
   onReset(): void {