Lazy Loading

The GridPDFExport component enables you to dynamically import the PDF export component only when it is needed.

The code-splitting is achieved over the usage of React.lazy and Suspense. The approach utilizes a separate component that is responsible for exporting the Grid to PDF. That component is loaded only when the user clicks the Export to PDF button.

import React, { Suspense, useState } from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column, GridToolbar } from '@progress/kendo-react-grid';
import { sampleProducts } from './sample-products.jsx';

const PDFExport = React.lazy(() => import('./PDFExport'));

const App = () => {
  const [exportPDF, setSetExportPDF] = useState(false);
  const exportCallback = function() {
    setSetExportPDF(false)
  }
  const grid = (
    <Grid
      data={sampleProducts}
    >
      <GridToolbar>
        <button
          title="Export PDF"
          className="k-button k-primary"
          onClick={() => setSetExportPDF(true)}
        >
          Export PDF
                    </button>
      </GridToolbar>
      <Column field="ProductID" title="ID" width="40px" />
      <Column field="ProductName" title="Name" width="250px" />
      <Column field="Category.CategoryName" title="Category" />
      <Column field="UnitPrice" title="Price" width="80px" />
      <Column field="UnitsInStock" title="In stock" width="80px" />
    </Grid>
  );

  return (
    <div>
      {grid}
      {exportPDF && <Suspense fallback={<span className="k-icon k-i-loading"></span>}>
        <PDFExport grid={grid} data={sampleProducts} exportPDF={exportPDF} exportPDF={exportPDF} exportCallback={exportCallback}/>
      </Suspense>}
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.querySelector('my-app')
);

In this article

 /