perspective

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

@@ -371,11 +371,8 @@ export class DashboardManagementComponent implements OnInit {
         configObject = { ...widget.config }; // Create a shallow copy
       }
 
-      // Inject widgetId and perspective into the config for the component
+      // Inject widgetId into the config for the component
       configObject.widgetId = widget.widgetId;
-      if (widget.perspective) {
-        configObject.perspective = widget.perspective;
-      }
 
       return {
         id: widget.widgetId,
@@ -385,7 +382,10 @@ export class DashboardManagementComponent implements OnInit {
         row: widget.y,
         col: widget.x,
         componentType: this.widgetComponentMap[widget.component],
-        componentInputs: { config: configObject },
+        componentInputs: {
+          config: configObject,
+          perspective: widget.perspective
+        },
         originalWidget: widget
       };
     });

src/app/portal-manage/widgets/base-widget.component.ts

@@ -5,6 +5,7 @@ import { DashboardStateService, SelectedDataset } from '../services/dashboard-st
 @Directive() // Use @Directive() for base classes without their own template
 export abstract class BaseWidgetComponent implements OnInit, OnDestroy {
   @Input() config: any;
+  @Input() perspective: string | null = null;
 
   public title: string;
   public isLoading = true;

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

@@ -44,6 +44,7 @@
       [columnMenuItems]="columnMenuItems"
       (columnMenuClick)="onColumnMenuClick($event)"
       (actionComplete)="actionComplete($event)"
+      (dataBound)="onDataBound($event)"
       height="100%">
       <e-columns>
         <e-column *ngFor="let col of columns" [field]="col.field" [headerText]="col.headerText" [width]="col.width"

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

@@ -59,6 +59,7 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
   @ViewChild('grid') public grid: GridComponent;
 
   public widgetId: string; // Added widgetId property
+  private isPerspectiveApplied = false;
 
   public data: DataManager = new DataManager([]);
   public columns: any[] = [];
@@ -104,11 +105,7 @@ 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);
-    }
+    // Perspective is now applied in onDataUpdate to ensure data is present.
   }
 
   applyInitialConfig(): void {
@@ -163,7 +160,8 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
     if (this.grid && state && state !== '{}') {
       try {
         const stateObj = JSON.parse(state);
-        (this.grid as any).setPersistData(stateObj); // Pass object instead of string
+        this.grid.setProperties(stateObj);
+        this.isPerspectiveApplied = true;
       } catch (e) {
         console.error("Error parsing perspective state for grid:", e);
       }
@@ -183,6 +181,13 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent imple
     }
   }
 
+  onDataBound(args: any): void {
+    // Apply perspective after data is loaded and rendered, but only once.
+    if (this.perspective && !this.isPerspectiveApplied) {
+      this.setWidgetState(this.perspective as string);
+    }
+  }
+
   onReset(): void {
     this.title = 'Data Grid (Default)';
     this.data = new DataManager([]);

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

@@ -31,6 +31,7 @@
       [toolbar]="toolbar"
       [displayOption]="displayOption"
       [chartSettings]="chartSettings"
+      (dataBound)="onDataBound($event)"
       height="100%">
     </ejs-pivotview>
 

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

@@ -19,6 +19,7 @@ export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent implemen
   @ViewChild('pivotview') public pivotview: PivotViewComponent;
 
   public widgetId: string;
+  private isPerspectiveApplied = false;
 
   public dataSourceSettings: {
     dataSource: DataManager;
@@ -65,11 +66,7 @@ export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent implemen
   }
 
   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);
-    }
+    // Perspective is now applied in onDataUpdate to ensure data is present.
   }
 
   applyInitialConfig(): void {
@@ -116,6 +113,7 @@ export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent implemen
         if (this.pivotview) {
           this.pivotview.dataSourceSettings = this.dataSourceSettings;
         }
+        this.isPerspectiveApplied = true;
       } catch (e) {
         console.error('Error applying pivot perspective state:', e);
       }
@@ -129,7 +127,17 @@ export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent implemen
     };
     if (this.pivotview) {
       this.pivotview.dataSourceSettings.dataSource = new DataManager(data);
-      this.pivotview.refresh();
+      // The refresh is implicitly handled by the dataBound event now
+    }
+  }
+
+  onDataBound(args: any): void {
+    if (this.pivotview) {
+        this.pivotview.refresh();
+    }
+    // Apply perspective after data is loaded and rendered, but only once.
+    if (this.perspective && !this.isPerspectiveApplied) {
+      this.setWidgetState(this.perspective as string);
     }
   }