Arko
Arko

Reputation: 189

How to implement pdfExport in syncfusion react grid as a functional component?

Have been trying to use the pdfExport() function from ej2-syncfusion GridComponent, but cannot seem to make it work as a functional component.

Note: I am not using the class component. And the browser console reports Uncaught TypeError: grid.pdfExport is not a function. I am probably missing something silly. What would be the functional component implementation of the code referred to in this documentation?

Upvotes: 1

Views: 194

Answers (2)

Arko
Arko

Reputation: 189

The way to do this is to reference the Grid and then call the pdfExport method within a callback which gets triggered on the toolbarClick.

const Component = () => {
    let grid;
    const toolbarClick = (args) => {
    if (grid) {
      if (args.item.id.includes('pdfexport')) {
        grid.pdfExport();
      }
    }
 }
 return (
 <GridComponent
  ref={g => grid = g}
  dataSource={data}
  allowPdfExport
  toolbar = {['PdfExport']}
  toolbarClick={toolbarClick}
 >

 </GridComponent>
 )
}

Upvotes: 0

Vaibhav Chopra
Vaibhav Chopra

Reputation: 1

App component

import {
  ColumnDirective,
  ColumnsDirective,
  Filter,
  GridComponent,
  Group
} from "@syncfusion/ej2-react-grids";
import {
  Inject,
  Page,
  PageSettingsModel,
  Sort,
  SortSettingsModel
} from "@syncfusion/ej2-react-grids";
import * as React from "react";
import { data } from "./datasource";
import Home from "./Home";

export default class App extends React.Component<{}, {}> {
  public pageSettings: PageSettingsModel = { pageSize: 6 };
  public sortSettings: SortSettingsModel = {
    columns: [{ field: "EmployeeID", direction: "Ascending" }]
  };
  public render() {
    return (
      <div>
        {" "}
        <Home /> <br /> <br /> <p>Grid-2 using Class Components</p>
        <GridComponent
          dataSource={data}
          allowPaging={true}
          pageSettings={this.pageSettings}
          allowSorting={true}
          sortSettings={this.sortSettings}
        >
          <ColumnsDirective>
            <ColumnDirective field="OrderID" width="100" textAlign="Right" />
            <ColumnDirective field="CustomerID" width="100" />
            <ColumnDirective field="EmployeeID" width="100" textAlign="Right" />
            <ColumnDirective
              field="Freight"
              width="100"
              format="C2"
              textAlign="Right"
            />
            <ColumnDirective field="ShipCountry" width="100" />
          </ColumnsDirective>
          <Inject services={[Page, Sort, Filter, Group]} />
        </GridComponent>{" "}
      </div>
    );
  }
}

Home Component

import {
  ColumnDirective,
  ColumnsDirective,
  GridComponent
} from "@syncfusion/ej2-react-grids";
import {
  Filter,
  Group,
  Inject,
  Page,
  PageSettingsModel,
  Sort,
  SortSettingsModel
} from "@syncfusion/ej2-react-grids";
import * as React from "react";
import { sdata } from "./datasource";

function Home() {
  const pageSettings: PageSettingsModel = { pageSize: 6 };
  const sortSettings: SortSettingsModel = {
    columns: [{ field: "EmployeeID", direction: "Ascending" }]
  };
  return (
    <div>
      {" "}
      <p>Grid-1 using Functional Components</p>
      <GridComponent
        dataSource={sdata}
        allowPaging={true}
        pageSettings={pageSettings}
        allowSorting={true}
        sortSettings={sortSettings}
      >
        <ColumnsDirective>
          <ColumnDirective field="OrderID" width="100" textAlign="Right" />
          <ColumnDirective field="CustomerID" width="100" />
          <ColumnDirective field="EmployeeID" width="100" textAlign="Right" />
          <ColumnDirective
            field="Freight"
            width="100"
            format="C2"
            textAlign="Right"
          />
          <ColumnDirective field="ShipCountry" width="100" />
        </ColumnsDirective>
        <Inject services={[Page, Sort, Filter, Group]} />
      </GridComponent>
    </div>
  );
}
export default Home;

Upvotes: 0

Related Questions