Pdf cell style customization in React Treegrid component

16 Sep 202317 minutes to read

Conditional cell formatting

TreeGrid cells in the exported PDF can be customized or formatted using pdfQueryCellInfo event. In this event, we can format the treegrid cells of exported PDF document based on the column cell value.

In the below sample, we have set the background color for Duration column in the exported document by args.cell and backgroundColor property.

app.jsx
app.tsx
import { getObject } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    const toolbarOptions = ['PdfExport'];
    const pageSettings = { pageSize: 7 };
    let treegrid;
    const toolbarClick = (args) => {
        if (treegrid) {
            treegrid.pdfExport();
        }
    };
    const pdfQueryCellInfo = (args) => {
        if (args.column.field === 'duration') {
            if (getObject('duration', args.data) === 0) {
                args.style = { backgroundColor: '#336c12' };
            }
            else if (getObject('duration', args.data) < 3) {
                args.style = { backgroundColor: '#7b2b1d' };
            }
        }
    };
    const queryCellInfo = (args) => {
        if (args.column.field === 'duration') {
            if (getObject('duration', args.data) === 0) {
                args.cell.style.background = '#336c12';
            }
            else if (getObject('duration', args.data) < 3) {
                args.cell.style.background = '#7b2b1d';
            }
        }
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging={true} pageSettings={pageSettings} allowPdfExport={true} height='220' toolbarClick={toolbarClick} ref={g => treegrid = g} toolbar={toolbarOptions} pdfQueryCellInfo={pdfQueryCellInfo} queryCellInfo={queryCellInfo}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Page, Toolbar, PdfExport]}/>
    </TreeGridComponent>;
}
;
export default App;
import { Column, getObject, PdfQueryCellInfoEventArgs, QueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar, ToolbarItems, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    const toolbarOptions: ToolbarItems[] = ['PdfExport'];
    const pageSettings: PageSettingsModel = { pageSize: 7 };
    let treegrid: TreeGridComponent | null;

    const toolbarClick = (args: ClickEventArgs): void => {
        if (treegrid) {
            treegrid.pdfExport();
        }
    }
    const pdfQueryCellInfo = (args: PdfQueryCellInfoEventArgs): void => {
        if((args.column as Column).field === 'duration'){
            if(getObject('duration', args.data) === 0) {
                args.style = {backgroundColor: '#336c12'};
            }
            else if(getObject('duration', args.data) < 3) {
                args.style = {backgroundColor: '#7b2b1d'};
            }
        }
    }
    const queryCellInfo = (args: QueryCellInfoEventArgs): void => {
        if ((args.column as Column).field === 'duration') {
            if (getObject('duration', args.data) === 0) {
                (args.cell as HTMLTableCellElement).style.background= '#336c12';
            } else if (getObject('duration', args.data) < 3) {
                (args.cell as HTMLTableCellElement).style.background= '#7b2b1d';
            }
        }
    }
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
        allowPaging={true} pageSettings={pageSettings} allowPdfExport={true} height='220'
    toolbarClick={toolbarClick} ref={g => treegrid = g}
    toolbar={toolbarOptions} pdfQueryCellInfo={pdfQueryCellInfo} queryCellInfo={queryCellInfo}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Page, Toolbar, PdfExport]}/>
    </TreeGridComponent>
};
export default App;

Theme

PDF export provides an option to include theme for exported PDF document.

To apply theme in exported PDF, define the theme in PdfExportProperties.

app.jsx
app.tsx
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    const toolbarOptions = ['PdfExport'];
    const pageSettings = { pageSize: 7 };
    let treegrid;
    const toolbarClick = (args) => {
        if (treegrid) {
            const exportProperties = {
                theme: {
                    header: {
                        bold: true,
                        border: { color: '#64FA50' },
                        fontColor: '#64FA50', fontName: 'Calibri', fontSize: 17
                    },
                    record: {
                        bold: true, fontColor: '#64FA50', fontName: 'Calibri', fontSize: 17
                    }
                }
            };
            treegrid.pdfExport(exportProperties);
        }
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging={true} pageSettings={pageSettings} allowPdfExport={true} height='220' toolbarClick={toolbarClick} ref={g => treegrid = g} toolbar={toolbarOptions}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Page, Toolbar, PdfExport]}/>
    </TreeGridComponent>;
}
;
export default App;
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar, ToolbarItems, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    const toolbarOptions: ToolbarItems[] = ['PdfExport'];
    const pageSettings: PageSettingsModel = { pageSize: 7 };
    let treegrid: TreeGridComponent | null;

    const toolbarClick = (args: ClickEventArgs): void => {
        if (treegrid) {
            const exportProperties: PdfExportProperties = {
              theme: {
                  header: {
                    bold: true,
                    border: { color: '#64FA50' },
                    fontColor: '#64FA50', fontName: 'Calibri', fontSize: 17
                  },
                  record: {
                    bold: true, fontColor: '#64FA50', fontName: 'Calibri', fontSize: 17
                  }
              }
            };
            treegrid.pdfExport(exportProperties);
        }
    }
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
        allowPaging={true} pageSettings={pageSettings} allowPdfExport={true} height='220'
    toolbarClick={toolbarClick} ref={g => treegrid = g}
    toolbar={toolbarOptions}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Page, Toolbar, PdfExport]}/>
    </TreeGridComponent>
};
export default App;

By default, material theme is applied to exported PDF document.