Exporting grid with templates in EJ2 TypeScript Grid control

29 Sep 202324 minutes to read

The grid offers the option to export the column, detail, and caption templates to a PDF document. The template contains images, hyperlinks, and customized text.

Exporting with column template

The PDF export functionality allows you to export Grid columns that include images, hyperlinks, and custom text to an PDF document.

In the following sample, the hyperlinks and images are exported to PDF using hyperlink and image properties in the pdfQueryCellInfo event.

PDF Export supports base64 string to export the images.

index.ts
index.html
import { Grid, Toolbar, PdfExport, PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { employeeData } from './datasource.ts';

Grid.Inject(Toolbar, PdfExport);

let grid: Grid = new Grid({
    dataSource: employeeData,
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    columns: [
        {
            headerText: 'Employee Image', textAlign: 'Center',
            template: '#imageTemplate', width: 150
        },
        { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 },
        { field: 'FirstName', headerText: 'Name', width: 120 },
        { field: 'EmailID', headerText: 'Email ID', template: '#mailTemplate', width: 170 }
    ],
    toolbarClick: toolbarClick,
    pdfQueryCellInfo: pdfQueryCellInfo,
    height: 273
});
grid.appendTo('#Grid');

function toolbarClick(args: ClickEventArgs) {
    if (args.item.id === 'Grid_pdfexport') {
        grid.pdfExport();
    }
}

function pdfQueryCellInfo(args: PdfQueryCellInfoEventArgs): any {
    if (args.column.headerText === 'Employee Image') {
        args.image = ({
            base64: args.data['EmployeeImage'],
            height: 50,
            width: 50,
        } as any);
    }
    if (args.column.headerText === 'Email ID') {
        args.hyperLink = {
            target: 'mailto:' + args.data['EmailID'],
            displayText: args.data['EmailID'],
        };
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
    
    
    
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    
    
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-grids/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <script id="imageTemplate" type="text/x-template">
            <div class="image">
                <img src="${EmployeeID}.png" alt="${EmployeeID}" />
            </div>
        </script>
        <script id="mailTemplate" type="text/x-template">
            <div class="link">
                <a href="mailto:${EmailID}">${EmailID}</a></div>
            </div>
        </script>
        <div id='Grid'></div>        
    </div>
</body>
</html>

ColumnTemplateExport

Exporting with detail template

By default, the grid will export the parent grid with expanded detail rows alone. Change the exporting option by using the PdfExportProperties.hierarchyExportMode property. The available options are:

Mode	Behavior
Expanded	Exports the parent grid with expanded detail rows.
All	Exports the parent grid with all the detail rows.
None	Exports the parent grid alone.

The detail rows in the exported PDF can be customized or formatted using the exportDetailTemplate event. In this event, the detail rows of the PDF document are formatted in accordance with their parent row details.

In the following sample, the detail row content is formatted by specifying the columnCount, columnHeader, and rows properties using its parentRow details. This allows for the creation of detail rows in the PDF document. Additionally, custom styles can be applied to specific cells using the style property.

If columnCount is not provided, the columns in the detail row of the PDF grid will be generated based on the count of the columnHeader/rows first row’s cells.
When using rowSpan, it is essential to provide the cell’s index for proper functionality.

index.ts
index.html
import { Grid, DetailRow, Toolbar, PdfExport, PdfExportProperties, ExportDetailTemplateEventArgs } from '@syncfusion/ej2-grids';
import { employeeData } from './datasource.ts';

Grid.Inject(DetailRow, Toolbar, PdfExport);

let grid: Grid = new Grid({
    dataSource: employeeData,
    detailTemplate: '#detailtemplate',
    toolbar: ['PdfExport'],
    allowPdfExport: true,
    toolbarClick: toolbarClick,
    exportDetailTemplate: exportDetailTemplate,
    columns: [
        { field: 'Category', headerText: 'Category', width: 140 },
        { field: 'ProductID', headerText: 'Product ID', width: 120 },
        { field: 'Status', headerText: 'Status', width: 120 }
    ],
    height: 273
});
grid.appendTo('#Grid');

function toolbarClick(args) {
    if (args['item'].id === 'Grid_pdfexport') {
        let exportProperties: PdfExportProperties = {
           hierarchyExportMode: "Expanded"
        };
        grid.pdfExport(exportProperties);
    }
}

function exportDetailTemplate(args: ExportDetailTemplateEventArgs) {
    args.value = {
        columnCount: 2,
        columnHeader: [
            {
                cells: [{
                    index: 0, colSpan: 2, value: 'Product Details',
                    style: { backColor: '#ADD8E6', pdfTextAlignment: 'Center', bold: true }
                }]
            }
        ],
        rows: [
            {
                cells: [
                    {
                        index: 0, rowSpan: 4, image: { base64: args.parentRow.data['ProductImg'], width: 80 }
                    },
                    {
                        index: 1, value: "Offers: " + args.parentRow.data['Offers'],
                        style: { fontColor: '#0A76FF', fontSize: 15 }
                    },
                ]
            },
            {
                cells: [
                    {
                        index: 1, value: 'Available: ' + args.parentRow.data['Available']
                    }]
            },
            {
                cells: [
                    {
                        index: 1, value: 'Contact: ',
                        hyperLink: {
                            target: 'mailto:' + args.parentRow.data['Contact'],
                            displayText: args.parentRow.data['Contact']
                        }
                    }]
            },
            {
                cells: [
                    {
                        index: 1, value: 'Ratings: ' + args.parentRow.data['Ratings'],
                        style: { fontColor: '#0A76FF', fontSize: 15 }
                    }
                ]
            },
            {
                cells: [
                    {
                        index: 0, value: args.parentRow.data['productDesc'],
                        style: { pdfTextAlignment: 'Center' }
                    },
                    { index: 1, value: args.parentRow.data['ReturnPolicy'] }
                ]
            },
            {
                cells: [
                    {
                        index: 0, value: args.parentRow.data['Cost'],
                        style: { bold: true, pdfTextAlignment: 'Center' }
                    },
                    { index: 1, value: args.parentRow.data['Cancellation'] }
                ]
            },
            {
                cells: [
                    {
                        index: 0, value: args.parentRow.data['Status'],
                        style: {
                            fontColor: args.parentRow.data['Status'] === 'Available' ? '#00FF00' : '#FF0000',
                            pdfTextAlignment: 'Center', fontSize: 15
                        }
                    },
                    {
                        index: 1, value: args.parentRow.data['Delivery'],
                        style: { fontColor: '#0A76FF', fontSize: 15 }
                    }
                ]
            }
        ],
    };
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
    
    
    
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <script id="detailtemplate">
        <table class="detailtable" width="100%">
            <colgroup>
                <col width="40%" />
                <col width="60%" />
            </colgroup>
            <thead>
                <tr>
                    <th colspan="2" style="font-weight: 500;text-align: center;background-color: #ADD8E6;">
                        Product Details
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="4" style="text-align: center;">
                        <img class='photo' src="data:image/jpeg;base64,${ProductImg}" alt="${EmployeeID}" />
                    </td>
                    <td>
                        <span style="font-weight: 500;color: #0a76ff;">Offers: ${Offers} </span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span>Available: ${Available} </span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="link">
                            Contact: <a href="mailto:${Contact}">${Contact}</a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span style="font-weight: 500;color: #0a76ff;"> Ratings: ${Ratings}</span>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center;">
                        <span> ${productDesc}</span>
                    </td>
                    <td>
                        <span>${ReturnPolicy}</span>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center;">
                        <span style="font-weight: 500;" > ${Cost}</span>
                    </td>
                    <td>
                        <span>${Cancellation}</span>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center;">
                        <span class="${Status}" style="font-weight: 500;" > ${Status}</span>
                    </td>
                    <td>
                        <span style="font-weight: 500;color: #0a76ff;">${Delivery}</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </script>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Grid'></div>        
    </div>
</body>
</html>

DetailTemplateExport

Exporting with caption template

The PDF export feature enables exporting of Grid with a caption template to an PDF document.

In the following sample, the customized caption text is exported to PDF using captionText property in the exportGroupCaption event.

index.ts
index.html
import { Grid, Group, Toolbar, PdfExport, ExportGroupCaptionEventArgs } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { employeeData } from './datasource.ts';

Grid.Inject(Group, Toolbar, PdfExport);

let grid: Grid = new Grid({
    dataSource: employeeData,
    allowGrouping: true,
    groupSettings: { captionTemplate: '#captiontemplate', columns: ['EmployeeID'] },
    allowPdfExport: true,
    toolbar: ['PdfExport'],
    columns: [
        { field: 'EmployeeID', headerText: 'Employee ID', width: 120 },
        { field: 'FirstName', headerText: 'Name', width: 120 },
        { field: 'City', headerText: 'City' },
        { field: 'Title', headerText: 'Title', width: 170 }
    ],
    toolbarClick: toolbarClick,
    exportGroupCaption: exportGroupCaption,
    height: 273
});
grid.appendTo('#Grid');

function toolbarClick(args: ClickEventArgs) {
    if (args.item.id === 'Grid_pdfexport') {
      grid.pdfExport();
    }
}
  
function exportGroupCaption(args: ExportGroupCaptionEventArgs) {
    args.captionText = args.data['field'] + ' - ' + args.data['key'];
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
    
    
    
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    
    
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-grids/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <script id="captiontemplate" type="text/x-template">
            ${field} - ${key}
        </script>
        <div id='Grid'></div>        
    </div>
</body>
</html>

CaptionTemplateExport