How can I help you?
PDF export in React TreeGrid
8 Oct 202524 minutes to read
PDF export enables exporting TreeGrid data to a PDF document. Export by calling the pdfExport method. To enable PDF export in the TreeGrid, set allowPdfExport to true.
For a quick start with exporting functionalities, refer to this video:
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 && args.item.text === 'PDF Export') {
treegrid.pdfExport();
}
};
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 { 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 && args.item.text === 'PDF Export') {
treegrid.pdfExport();
}
}
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;Custom data source
PDF export supports defining a datasource dynamically before exporting. To export data dynamically, set the dataSource in PdfExportProperties.
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 = {
dataSource: sampleData,
};
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 = {
dataSource: sampleData,
};
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;Exporting Custom Aggregates in TreeGrid
The TreeGrid supports exporting custom aggregates, which summarize column data, to a PDF document using the PdfAggregateQueryCellInfo event.
In the example, the customAggregateFn function computes the item count for a selected category, and the PdfAggregateQueryCellInfo event customizes the exported cell values in the PDF document.
import { getObject, PdfExportProperties } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, AggregatesDirective,AggregateColumnsDirective,AggregateColumnDirective, AggregateDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar, Aggregate, ToolbarItems, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { summaryData } from './datasource';
import { DropDownList } from '@syncfusion/ej2-react-dropdowns';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
function App() {
let item = "Seafood";
const toolbarOptions = ['PdfExport'];
let treegrid;
const toolbarClick = (args) => {
if (treegrid && args.item.text === 'Excel Export') {
(treegrid).excelExport();
}
else if (treegrid && args.item.text === 'PDF Export') {
let exportProperties = {
pageOrientation: 'Landscape',
};
(treegrid).pdfExport(exportProperties);
}
else if (treegrid && args.item.text === 'CSV Export') {
(treegrid).csvExport();
}
}
//Handles the 'pdfAggregateQueryCellInfo' event to customize aggregate cells during PDF export.
const pdfAggregateQueryCellInfo = (args) => {
if (args.cell.column.headerText === "Category") {
args.value = "Count of " + item + " : " + args.row.data.category.Custom;
}
}
let listObj;
const foods = [
{ food: "Seafood" },
{ food: "Dairy" },
{ food: "Edible" },
{ food: "Crystal" },
];
//Custom aggregate function to calculate the count of items for the selected category.
const customAggregateFn = (data) => {
let sampleData = data.result ? getObject('result', data) : data;
let countLength;
countLength = 0;
if (sampleData !== undefined) {
sampleData.filter((record) => {
let data = getObject("category", record);
let value = item;
if (data === value) {
countLength++;
}
});
}
return countLength;
};
const custom = (props) => {
return (
<span>
{" "}
Count of <input type="text" id="customers" /> : {props.Custom}
</span>
);
};
const dataBound = () => {
setTimeout(() => {
if (!isNullOrUndefined(listObj)) {
listObj.destroy();
}
listObj = new DropDownList({
dataSource: foods,
fields: { value: "food" },
placeholder: "Select a Category",
width: "110px",
value: item,
change: () => {
setTimeout(() => {
item = (listObj as any).value.toString();
treegrid.refresh();
}, 300);
},
});
listObj.appendTo("#customers");
})
};
return <TreeGridComponent
dataSource={summaryData} treeColumnIndex={1} childMapping="subtasks"
height="400" ref={(g) => treegrid = g} allowPdfExport={true} dataBound={dataBound}
pdfAggregateQueryCellInfo={pdfAggregateQueryCellInfo} toolbarClick={toolbarClick}
toolbar={toolbarOptions}
>
<ColumnsDirective>
<ColumnDirective field='ID' headerText='Order ID' width='115' textAlign='Left'></ColumnDirective>
<ColumnDirective field='Name' headerText='Shipment Name' textAlign='Left' width='230'></ColumnDirective>
<ColumnDirective field='shipmentDate' headerText='Shipment Date' width='135' textAlign='Right' type='date' format='yMd'></ColumnDirective>
<ColumnDirective field='category' headerText='Category' width='220' textAlign='Left' minWidth='220' />
<ColumnDirective field='units' headerText='Units' width='90' textAlign='Right' type='number' />
<ColumnDirective field='unitPrice' headerText='Unit Price($)' width='100' textAlign='Right' type='number' format='C2' />
<ColumnDirective field='price' headerText='Price($)' width='100' textAlign='Right' type='number' format='C0' />
</ColumnsDirective>
<AggregatesDirective>
<AggregateDirective showChildSummary={false}>
<AggregateColumnsDirective>
<AggregateColumnDirective
columnName="category"
type="Custom"
customAggregate={customAggregateFn}
footerTemplate={custom}
>
{" "}
</AggregateColumnDirective>
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
<Inject services={[Aggregate, Toolbar, PdfExport]} />
</TreeGridComponent>
};
export default App;import { getObject, PdfExportProperties } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, AggregatesDirective,AggregateColumnsDirective,AggregateColumnDirective, AggregateDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, PdfExport, Toolbar, Aggregate, ToolbarItems, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { summaryData } from './datasource';
import { DropDownList } from '@syncfusion/ej2-react-dropdowns';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
function App() {
let item: string = "Seafood";
const toolbarOptions: ToolbarItems[] = ['PdfExport'];
let treegrid: TreeGridComponent;
const toolbarClick = (args: ClickEventArgs): void => {
if (treegrid && args.item.text === 'Excel Export') {
(treegrid as any).excelExport();
}
else if (treegrid && args.item.text === 'PDF Export') {
let exportProperties: PdfExportProperties = {
pageOrientation: 'Landscape',
};
(treegrid as any).pdfExport(exportProperties);
}
else if (treegrid && args.item.text === 'CSV Export') {
(treegrid as any).csvExport();
}
}
//Handles the 'pdfAggregateQueryCellInfo' event to customize aggregate cells during PDF export.
const pdfAggregateQueryCellInfo = (args: any): void => {
if (args.cell.column.headerText === "Category") {
args.value = "Count of " + item + " : " + args.row.data.category.Custom;
}
}
let listObj: DropDownList;
const foods: { [key: string]: Object }[] = [
{ food: "Seafood" },
{ food: "Dairy" },
{ food: "Edible" },
{ food: "Crystal" },
];
//Custom aggregate function to calculate the count of items for the selected category.
const customAggregateFn = (data: any): any => {
let sampleData: any = data.result ? getObject('result', data) : data;
let countLength: number;
countLength = 0;
if (sampleData !== undefined) {
sampleData.filter((record: Object) => {
let data: string = getObject("category", record);
let value: string = item;
if (data === value) {
countLength++;
}
});
}
return countLength;
};
const custom = (props:any): any => {
return (
<span>
{" "}
Count of <input type="text" id="customers" /> : {props.Custom}
</span>
);
};
const dataBound = (): void => {
setTimeout(() => {
if (!isNullOrUndefined(listObj)) {
listObj.destroy();
}
listObj = new DropDownList({
dataSource: foods,
fields: { value: "food" },
placeholder: "Select a Category",
width: "110px",
value: item,
change: () => {
setTimeout(() => {
item = (listObj as any).value.toString();
treegrid.refresh();
}, 300);
},
});
listObj.appendTo("#customers");
})
};
return <TreeGridComponent
dataSource={summaryData} treeColumnIndex={1} childMapping="subtasks"
height="400" ref={(g:any) => treegrid = g} allowPdfExport={true} dataBound={dataBound}
pdfAggregateQueryCellInfo={pdfAggregateQueryCellInfo} toolbarClick={toolbarClick}
toolbar={toolbarOptions}
>
<ColumnsDirective>
<ColumnDirective field='ID' headerText='Order ID' width='115' textAlign='Left'></ColumnDirective>
<ColumnDirective field='Name' headerText='Shipment Name' textAlign='Left' width='230'></ColumnDirective>
<ColumnDirective field='shipmentDate' headerText='Shipment Date' width='135' textAlign='Right' type='date' format='yMd'></ColumnDirective>
<ColumnDirective field='category' headerText='Category' width='220' textAlign='Left' minWidth='220' />
<ColumnDirective field='units' headerText='Units' width='90' textAlign='Right' type='number' />
<ColumnDirective field='unitPrice' headerText='Unit Price($)' width='100' textAlign='Right' type='number' format='C2' />
<ColumnDirective field='price' headerText='Price($)' width='100' textAlign='Right' type='number' format='C0' />
</ColumnsDirective>
<AggregatesDirective>
<AggregateDirective showChildSummary={false}>
<AggregateColumnsDirective>
<AggregateColumnDirective
columnName="category"
type="Custom"
customAggregate={customAggregateFn}
footerTemplate={custom}
>
{" "}
</AggregateColumnDirective>
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
<Inject services={[Aggregate, Toolbar, PdfExport]} />
</TreeGridComponent>
};
export default App;Refer to the React TreeGrid feature tour page for highlights. Explore the React TreeGrid example to learn how to present and manipulate data.