Aggregate Style in PDF Export

[Nagendra Gupta]

Hello Team,

1. I want to Customize Aggregate Cell in PDF Export, is there any event like pdfHeaderQueryCellInfo, pdfQueryCellInfo.
2. If Grid having more than 6000 records, while exporting pdf page become unresponsive 

<ejs-grid #pdfGrid height="200px"

                    allowPdfExport="true" enableVirtualization="true"

                    [dataSource]="data"

                    [columns]="pdfGridColumnList"

                    (pdfExportComplete)="pdfExportComplete()"

                    (pdfHeaderQueryCellInfo)="pdfHeaderQueryCellInfo($event)"

                    (pdfQueryCellInfo)="pdfQueryCellInfo($event)"

                    [aggregates]="aggregateColumn"

                    >

                </ejs-grid>

exportGridPDF(){

const pdfExportProperties: PdfExportProperties = {

                fileName: fileName + '.pdf',

                pageOrientation: printOrientation,

                includeHiddenColumn: false,

                allowHorizontalOverflow: false,

                theme: {

                    header: { border: { color: '#000000' }, fontSize: 8, bold: true, fontName: 'Arial' },

                    record: { fontColor: '#000000', fontSize: 7, fontName: 'Arial' },

                    caption: { fontColor: '#000000', fontSize: 8, fontName: 'Arial' },

                },

                header: {

                    fromTop: 0,

                    height: 60,

                    contents: headerContent

                },

                footer: {

                    fromBottom: 0,

                    height: 17,

                    contents: [

                        {

                            type: 'PageNumber',

                            pageNumberType: 'Arabic',

                            format: 'Page {$current} of {$total}',

                            position: { x: pageNoOffset, y: 0 },

                            style: { textBrushColor: '#000000', fontSize: 10 }

                        }

                    ]

                }

            };

            gridObj.pdfExport(pdfExportProperties);

}

 pdfQueryCellInfo(args: PdfQueryCellInfoEventArgs): void {

        this.adjustPDFColumns(args);

        if (args.column.field == '__SrNo') {

            this.excelExportSrNoValue++;

            args.value = this.excelExportSrNoValue.toString();

        }

        if (Common.isNullOrUndefined(args.style)) {

            const pdfStyle: PdfStyle = { textAlignment: 'Left' };

            args.style = pdfStyle;

        }

       

        if (!Common.isNullOrUndefined(args.data[args.column.field + '_BOLD'])) {

            if (+args.data[args.column.field + '_BOLD'] == 1) {

                args.style.bold = true;

            }

        }

        if (!Common.isNullOrUndefined(args.data[args.column.field + '_COLSPAN'])) {

            args.colSpan = +args.data[args.column.field + '_COLSPAN'];

        }

        const columnAlign = args.column.textAlign.toString();

        if (args.column.type == 'number' || columnAlign == "RIGHT") {

            args.style.textAlignment = 'Right';

        }

    }

    pdfHeaderQueryCellInfo(args: PdfHeaderQueryCellInfoEventArgs): void {

        args.cell['row']['pdfGrid'].repeatHeader = true;

        args.style.verticalAlignment = 'Top'

    }

[Rajapandi Ravi]

Hi Nagendra,

Greetings from Syncfusion support

Query#: I want to Customize Aggregate Cell in PDF Export, is there any event like pdfHeaderQueryCellInfo, pdfQueryCellInfo.

You can customize the aggregate cell using the pdfAggregateQueryCellInfo event of Grid.

Query#: If Grid having more than 6000 records, while exporting pdf page become unresponsive

Based on your query we have prepared a sample and tried to reproduce your reported problem, but it was unsuccessful. Please refer the below sample for more information.

Sample: https://stackblitz.com/edit/angular-zrl7w8?file=app.component.ts,app.component.html

If you still face the issue, please share the below details that will be helpful for us to provide better solution.

1)           Please confirm how many columns you are binding in your application.

2)           How many records you are binding in the Grid.

3)           Share the issue reproducible sample or try to reproduce the issue in our above attached sample.

4)            Share the syncfusion package version.

Regards,

Rajapandi R

[Nagendra Gupta]

Hi Rajapandi, 

I have tried your given sample in my system and getting same error:

My System Information

Processor Intel(R) Core(TM) i5-3470S CPU @ 2.90GHz 3.60 GHz

Installed RAM 16.0 GB (15.9 GB usable)

System type 64-bit operating system, x64-based processor

Window 11

Browser Chrome  Version 105.0.5195.127 (Official Build) (64-bit)

SSD Hard Drive

Please let me know if anything required from side.

[Rajapandi Ravi]

Hi Nagendra,

Thanks for your update

While exporting large number of records in the client side leads the performance issue in Browser.

To resolve the performance problem in browser, The Grid has an option to export the data to Excel in server side using Grid server export library. You can use this to perform server-side export for large amount of data to achieve your requirement.

More details on this along with the required DLL references needed for performing this action can be checked in the below documentation link,

Server-Side Export: https://ej2.syncfusion.com/angular/documentation/grid/pdf-export/exporting-grid-in-server/

Regards,

Rajapandi R