Export FlexGrid to a File (React)
This sample shows how to export a FlexGrid that implements row groups to a PDF file. FlexGridPdfConverter provides the export class method to export FlexGrid to a file.
Learn about FlexGrid | FlexGrid API Reference
This example uses React.
app.jsx
index.html
app.css
data.jsx
Copy to CodeMine
import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import ReactDOM from 'react-dom/client';
import React, { useRef, useState } from 'react';
import useEvent from 'react-use-event-hook';
import * as wijmo from '@mescius/wijmo';
import { PdfPageOrientation } from '@mescius/wijmo.pdf';
import { ExportMode, ScaleMode, FlexGridPdfConverter } from '@mescius/wijmo.grid.pdf';
import * as wjcGrid from '@mescius/wijmo.react.grid';
import * as wjInput from '@mescius/wijmo.react.input';
import './app.css';
import { data } from './data';
function App() {
const [scaleMode, setScaleMode] = useState(ScaleMode.ActualSize);
const [exportMode, setExportMode] = useState(ExportMode.All);
const [orientation, setOrientation] = useState(PdfPageOrientation.Portrait);
const flexGridRef = useRef(null);
const initializeGrid = useEvent((source) => {
flexGridRef.current = source;
applyGroupBy(flexGridRef.current);
});
const exportPDF = () => {
if (!flexGridRef.current)
return;
FlexGridPdfConverter.export(flexGridRef.current, 'FlexGrid.pdf', {
maxPages: 10,
exportMode: exportMode,
scaleMode: scaleMode,
documentOptions: {
pageSettings: {
layout: orientation
},
header: {
declarative: {
text: '\t&[Page]\\&[Pages]'
}
},
footer: {
declarative: {
text: '\t&[Page]\\&[Pages]'
}
}
},
styles: {
cellStyle: {
backgroundColor: '#ffffff',
borderColor: '#c6c6c6'
},
altCellStyle: {
backgroundColor: '#f9f9f9'
},
groupCellStyle: {
backgroundColor: '#dddddd'
},
headerCellStyle: {
backgroundColor: '#eaeaea'
}
}
});
};
const applyGroupBy = (flexGrid) => {
let groupNames = ['Product', 'Country', 'Amount'];
// get the collection view, start update
let cv = flexGrid.collectionView;
cv.beginUpdate();
// clear existing groups
cv.groupDescriptions.clear();
// add new groups
for (let i = 0; i < groupNames.length; i++) {
let propName = groupNames[i].toLowerCase();
//
if (propName == 'amount') {
// group amounts in ranges
// (could use the mapping function to group countries into continents,
// names into initials, etc)
let groupDesc = new wijmo.PropertyGroupDescription(propName, (item, prop) => {
let value = item[prop];
if (value > 1000)
return 'Large Amounts';
if (value > 100)
return 'Medium Amounts';
if (value > 0)
return 'Small Amounts';
return 'Negative';
});
cv.groupDescriptions.push(groupDesc);
}
else {
if (propName) {
// group other properties by their specific values
let groupDesc = new wijmo.PropertyGroupDescription(propName);
cv.groupDescriptions.push(groupDesc);
}
}
}
// done updating
cv.endUpdate();
};
return (<div className="container-fluid">
<div className="panel-group">
<div className="panel panel-default">
<div className="panel-heading">
<h4 className="panel-title">
Export Settings
</h4>
</div>
<div className="panel-body">
<ul className="list-inline">
<li>
<wjInput.Menu header='Scale mode' itemClicked={(s) => setScaleMode(s.selectedValue)} value={scaleMode}>
<wjInput.MenuItem value={ScaleMode.ActualSize}>
ActualSize
</wjInput.MenuItem>
<wjInput.MenuItem value={ScaleMode.PageWidth}>
PageWidth
</wjInput.MenuItem>
<wjInput.MenuItem value={ScaleMode.SinglePage}>
SinglePage
</wjInput.MenuItem>
</wjInput.Menu>
</li>
<li>
<wjInput.Menu header='Orientation' itemClicked={(s) => setOrientation(s.selectedValue)} value={orientation}>
<wjInput.MenuItem value={PdfPageOrientation.Portrait}>
Portrait
</wjInput.MenuItem>
<wjInput.MenuItem value={PdfPageOrientation.Landscape}>
Landscape
</wjInput.MenuItem>
</wjInput.Menu>
</li>
<li>
<wjInput.Menu header='Export mode' itemClicked={(s) => setExportMode(s.selectedValue)} value={exportMode}>
<wjInput.MenuItem value={ExportMode.All}>
All
</wjInput.MenuItem>
<wjInput.MenuItem value={ExportMode.Selection}>
Selection
</wjInput.MenuItem>
</wjInput.Menu>
</li>
</ul>
</div>
</div>
</div>
{/* Export button */}
<button className="btn btn-default" onClick={exportPDF}> Export</button>
{/* FlexGrid */}
<wjcGrid.FlexGrid className="grid" autoGenerateColumns={false} selectionMode="ListBox" headersVisibility="All" itemsSource={data} initialized={initializeGrid}>
<wjcGrid.FlexGridColumn header="ID" binding="id"/>
<wjcGrid.FlexGridColumn header="Start Date" binding="start" format="d" minWidth={80}/>
<wjcGrid.FlexGridColumn header="End Date" binding="end" format="d" minWidth={80}/>
<wjcGrid.FlexGridColumn header="Country" binding="country"/>
<wjcGrid.FlexGridColumn header="Product" binding="product"/>
<wjcGrid.FlexGridColumn header="Amount" binding="amount" format="c" aggregate="Sum"/>
<wjcGrid.FlexGridColumn header="Color" binding="color"/>
<wjcGrid.FlexGridColumn header="Pending" binding="amount2" format="c2"/>
<wjcGrid.FlexGridColumn header="Discount" binding="discount" format="p1"/>
<wjcGrid.FlexGridColumn header="Active" binding="active"/>
</wjcGrid.FlexGrid>
</div>);
}
const container = document.getElementById('app');
if (container) {
const root = ReactDOM.createRoot(container);
root.render(<App />);
}
Feedback
Submit and view feedback for