fix: finjs pdf button styling and exported columns (#3853)

Author: onlyexeption

projects/app-lob/src/app/grid-finjs/grid-finjs.component.html

@@ -21,8 +21,9 @@
         <igx-grid-toolbar-actions>
           <igx-grid-toolbar-hiding title="Indicators"></igx-grid-toolbar-hiding>
           <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
-          <igx-grid-toolbar-exporter [exportCSV]="false">
+          <igx-grid-toolbar-exporter [exportCSV]="false" (exportStarted)="exportStarted($event)">
             <span excelText>Export to Excel</span>
+            <span pdfText>Export to PDF</span>
           </igx-grid-toolbar-exporter>
         </igx-grid-toolbar-actions>
       </igx-grid-toolbar>

projects/app-lob/src/app/grid-finjs/grid-finjs.component.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import { AsyncPipe, CurrencyPipe } from '@angular/common';
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, DOCUMENT, inject } from '@angular/core';
-import { CellType, GridSelectionMode, IGridKeydownEventArgs, IRowSelectionEventArgs, IgxCellEditorTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxExcelTextDirective, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular/grids/core';
+import { CellType, GridSelectionMode, IColumnExportingEventArgs, IGridKeydownEventArgs, IRowSelectionEventArgs, IgxCellEditorTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxExcelTextDirective, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxPdfExporterOptions, IgxPdfExporterService, IgxPdfTextDirective } from 'igniteui-angular/grids/core';
 import { DefaultSortingStrategy, IgxOverlayOutletDirective, OverlaySettings, SortingDirection } from 'igniteui-angular/core';
 import { IgxGridComponent } from 'igniteui-angular/grids/grid';
 import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select';
@@ -17,11 +17,12 @@ import { FormsModule } from '@angular/forms';
     selector: 'app-finjs-grid',
     templateUrl: './grid-finjs.component.html',
     styleUrls: ['./grid-finjs.component.scss'],
-    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxIconButtonDirective, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe]
+    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxPdfTextDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxIconButtonDirective, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe]
 })
 export class GridFinJSComponent implements OnInit {
     private el = inject(ElementRef);
     private document = inject<Document>(DOCUMENT);
+    private pdfExportService = inject(IgxPdfExporterService);
     dataService = inject(SignalRService);
 
     @ViewChild('grid1', { static: true }) public grid: IgxGridComponent;
@@ -116,6 +117,34 @@ export class GridFinJSComponent implements OnInit {
         this.chartColumnKeyDown.emit(target.row.data);
     }
 
+    public exportStarted(args: IgxExporterEvent) {
+        (args.options as IgxPdfExporterOptions).pageSize = "A3";
+
+        const includedFields = new Set([
+            'id',
+            'category',
+            'type',
+            'contract',
+            'settlement',
+            'country',
+            'region',
+            'lastupdated',
+            'openprice',
+            'price',
+            'change',
+            'buy',
+            'sell'
+        ]);
+
+        this.pdfExportService.columnExporting.subscribe((exportArgs: IColumnExportingEventArgs) => {
+            const field = exportArgs.field.toLowerCase();
+            if (!includedFields.has(field)) {
+                exportArgs.cancel = true;
+            }
+        });
+
+    }
+
     get gridWrapper(): HTMLElement {
         return this.el.nativeElement.querySelector('.grid__wrapper') as HTMLElement;
     }