Search results

Exporting the Selected Records

You can export the selected records data by passing it to PdfExportProperties.dataSource or ExcelExportProperties.dataSource property in the toolbarClick event.

In the below exporting demo, we can get the selected records using getSelectedRecords method and pass the selected data to pdfExport or excelExport methods using respective export properties..

import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, PdfExportProperties } from '@syncfusion/ej2-react-grids';
import { Filter, Grid, Page, PageSettingsModel, PdfExport, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import { ExcelExport, ExcelExportProperties, SelectionSettingsModel } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';

export default class App extends React.Component<{}, {}> {
  public grid: Grid | null;
  public pageOptions: PageSettingsModel = {pageSize:5, pageCount:5};
  public selectionOptions: SelectionSettingsModel = {type: 'Multiple'};
  public toolbar: ToolbarItems[] = ['PdfExport','ExcelExport'];
  public toolbarClick = (args: ClickEventArgs) => {
    if (this.grid) {
      if ( === 'grid_pdfexport') {
        const selectedRecords = this.grid.getSelectedRecords();
        const exportProperties: PdfExportProperties = {
          dataSource: selectedRecords
      } else if ( === 'grid_excelexport') {
        const selectedRecords = this.grid.getSelectedRecords();
        const exportProperties: ExcelExportProperties = {
          dataSource: selectedRecords
  public render() {
    this.toolbarClick = this.toolbarClick.bind(this);
    return <GridComponent id='grid' dataSource={data} allowPaging={true}
    allowFiltering={true} allowPdfExport={true} allowExcelExport={true} toolbar={this.toolbar}
    pageSettings={this.pageOptions} selectionSettings={this.selectionOptions} toolbarClick={this.toolbarClick}
      ref={g => this.grid = g}>
          <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" isPrimaryKey={true}/>
          <ColumnDirective field='CustomerID' headerText='Customer ID' width='120'/>
          <ColumnDirective field='Freight' headerText='Freight' width='120' format="C2" textAlign="Right"/>
          <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'/>
        <Inject services={[Page, Filter,Toolbar, PdfExport, ExcelExport]} />