syncfution

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

@@ -20,7 +20,18 @@
     </div>
 
     <!-- Grid -->
-    <ejs-grid *ngIf="!isLoading && !hasError" [dataSource]="data" [allowPaging]="true" [pageSettings]="pageSettings" [allowSorting]="true" [allowFiltering]="true" [allowGrouping]="true" height="100%">
+    <ejs-grid #grid *ngIf="!isLoading && !hasError" 
+      [dataSource]="data" 
+      [allowPaging]="true" 
+      [pageSettings]="pageSettings" 
+      [allowSorting]="true" 
+      [allowFiltering]="true" 
+      [allowGrouping]="true" 
+      [toolbar]="toolbar"
+      (toolbarClick)="toolbarClick($event)"
+      [allowExcelExport]="true"
+      [allowPdfExport]="true"
+      height="100%">
       <e-columns>
         <e-column *ngFor="let col of columns" [field]="col.field" [headerText]="col.headerText" [width]="col.width"></e-column>
       </e-columns>

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

-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { GridModule, PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids';
-import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data'; // Added DataManager import
+import { GridModule, PageService, SortService, FilterService, GroupService, ToolbarService, ExcelExportService, PdfExportService, GridComponent, ToolbarItems } from '@syncfusion/ej2-angular-grids';
+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';
 
@@ -9,13 +10,16 @@ import { BaseWidgetComponent } from '../base-widget.component';
   selector: 'app-syncfusion-datagrid-widget',
   standalone: true,
   imports: [CommonModule, GridModule],
-  providers: [PageService, SortService, FilterService, GroupService],
+  providers: [PageService, SortService, FilterService, GroupService, ToolbarService, ExcelExportService, PdfExportService],
   templateUrl: './syncfusion-datagrid-widget.component.html',
 })
 export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent {
-  public data: DataManager = new DataManager([]); // Changed type and initialized
+  @ViewChild('grid') public grid: GridComponent;
+
+  public data: DataManager = new DataManager([]);
   public columns: any[] = [];
   public pageSettings: Object = { pageSize: 10 };
+  public toolbar: ToolbarItems[] = ['Search', 'ExcelExport', 'PdfExport', 'CsvExport'];
 
   constructor(protected override dashboardStateService: DashboardStateService) {
     super(dashboardStateService);
@@ -28,12 +32,11 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent {
   }
 
   onDataUpdate(data: any[]): void {
-    this.data = new DataManager(data); // Initialize DataManager with the data
+    this.data = new DataManager(data);
     if (this.config.columns && this.config.columns.length > 0) {
       this.columns = this.config.columns;
-    } else if (data.length > 0) { // Changed this.data.length to data.length
-      // Auto-generate columns if not provided in config
-      this.columns = Object.keys(data[0]).map(key => ({ // Changed this.data[0] to data[0]
+    } else if (data.length > 0) {
+      this.columns = Object.keys(data[0]).map(key => ({
         field: key,
         headerText: this.formatHeader(key),
         width: 150
@@ -43,10 +46,23 @@ export class SyncfusionDatagridWidgetComponent extends BaseWidgetComponent {
 
   onReset(): void {
     this.title = 'Data Grid (Default)';
-    this.data = new DataManager([]); // Initialize with empty DataManager
+    this.data = new DataManager([]);
     this.columns = [{ field: 'Message', headerText: 'Please select a dataset' }];
   }
 
+  toolbarClick(args: ClickEventArgs): void {
+    if (!this.grid || !args.item || !args.item.id) return;
+
+    const fileName = `${this.title}.xlsx`;
+    if (args.item.id.includes('_excelexport')) {
+      this.grid.excelExport({ fileName });
+    } else if (args.item.id.includes('_pdfexport')) {
+      this.grid.pdfExport({ fileName: `${this.title}.pdf` });
+    } else if (args.item.id.includes('_csvexport')) {
+      this.grid.csvExport({ fileName: `${this.title}.csv` });
+    }
+  }
+
   private formatHeader(key: string): string {
     return key.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase());
   }

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

@@ -20,7 +20,16 @@
     </div>
 
     <!-- Pivot View -->
-    <ejs-pivotview *ngIf="!isLoading && !hasError" [dataSourceSettings]="dataSourceSettings" [allowCalculatedField]="true" [showFieldList]="true" [showToolbar]="true" height="100%">
+    <ejs-pivotview #pivotview *ngIf="!isLoading && !hasError" 
+      [dataSourceSettings]="dataSourceSettings" 
+      [allowCalculatedField]="true" 
+      [showFieldList]="true" 
+      [showToolbar]="true"
+      [allowPdfExport]="true"
+      [allowExcelExport]="true"
+      (toolbarClick)="toolbarClick($event)"
+      [toolbar]="toolbar"
+      height="100%">
     </ejs-pivotview>
 
   </div>

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

-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { PivotViewModule, IDataSet, FieldListService, CalculatedFieldService, ToolbarService, GroupingBarService, ConditionalFormattingService } from '@syncfusion/ej2-angular-pivotview';
-import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data'; // Added DataManager import
+import { PivotViewModule, IDataSet, FieldListService, CalculatedFieldService, ToolbarService, GroupingBarService, ConditionalFormattingService, PivotViewComponent, PDFExportService, ExcelExportService, ToolbarItems } from '@syncfusion/ej2-angular-pivotview';
+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';
 
@@ -9,30 +10,38 @@ import { BaseWidgetComponent } from '../base-widget.component';
   selector: 'app-syncfusion-pivot-widget',
   standalone: true,
   imports: [CommonModule, PivotViewModule],
-  providers: [FieldListService, CalculatedFieldService, ToolbarService, GroupingBarService, ConditionalFormattingService],
+  providers: [FieldListService, CalculatedFieldService, ToolbarService, GroupingBarService, ConditionalFormattingService, ExcelExportService, PDFExportService],
   templateUrl: './syncfusion-pivot-widget.component.html',
 })
 export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent {
+  @ViewChild('pivotview') public pivotview: PivotViewComponent;
+
   public dataSourceSettings: {
-    dataSource: DataManager; // Changed type to DataManager
+    dataSource: DataManager;
     expandAll: boolean;
     rows: any[];
     columns: any[];
     values: any[];
     filters: any[];
   } = {
-    dataSource: new DataManager([]), // Initialized with empty DataManager
+    dataSource: new DataManager([]),
     expandAll: false,
     rows: [],
     columns: [],
     values: [],
     filters: [],
   };
+  public toolbar: ToolbarItems[];
 
   constructor(protected override dashboardStateService: DashboardStateService) {
     super(dashboardStateService);
   }
 
+  override ngOnInit(): void {
+    this.toolbar = ['Grid', 'Chart', 'Export', 'FieldList', 'Formatting'];
+    super.ngOnInit();
+  }
+
   applyInitialConfig(): void {
     this.title = this.config.title || 'Pivot Table';
     this.dataSourceSettings = {
@@ -46,7 +55,10 @@ export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent {
   }
 
   onDataUpdate(data: IDataSet[]): void {
-    this.dataSourceSettings.dataSource = new DataManager(data);
+    this.dataSourceSettings = {
+        ...this.dataSourceSettings,
+        dataSource: new DataManager(data)
+    };
   }
 
   onReset(): void {
@@ -64,4 +76,17 @@ export class SyncfusionPivotWidgetComponent extends BaseWidgetComponent {
       filters: [],
     };
   }
+
+  toolbarClick(args: ClickEventArgs): void {
+    if (!this.pivotview || !args.item || !args.item.id) return;
+
+    const fileName = `${this.title}.xlsx`;
+    if (args.item.id.includes('_excelexport')) {
+      this.pivotview.excelExport({ fileName });
+    } else if (args.item.id.includes('_pdfexport')) {
+      this.pivotview.pdfExport({ fileName: `${this.title}.pdf` });
+    } else if (args.item.id.includes('_csvexport')) {
+      this.pivotview.csvExport({ fileName: `${this.title}.csv` });
+    }
+  }
 }