Reputation: 189
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
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
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