How do I export a Grid to PDF with a heading in KendoReact (TypeScript)?

Question

I have a Data Grid component which contains a normal table of data, and I just want to add a simple heading to the beginning of the exported PDF, like this:

 <div>
    <h1>STUDENTS DEPARTMENT TABLE</h1>
    <h3>DEPARTMENT OF ENGINEERING, 2023</h3>
 </div>

I tried to wrap this in the GridPDFExport component like this:

<div>
          {grid}
          <GridPDFExport 
            landscape={true}
            repeatHeaders={true} 
            paperSize='A4' 
            scale={0.5} 
            ref={pdfExport => gridPDFExport = pdfExport} 
            margin='1cm'
          >
            <div>
              <h1>STUDENTS DEPARTMENT TABLE</h1>
              <h3>DEPARTMENT OF ENGINEERING, 2023</h3>
            </div>
            {grid}
          </GridPDFExport>
</div>

Here's my export method:

const exportToPDF =  () => {
    setTimeout(() => {
      if (gridPDFExport) {
        gridPDFExport.save(gridData)
      }
    }, 250)
  }

But the heading doesn't show at all in the exported PDF, just the grid.

I expected the heading to show at the top of the PDF, but only the grid showed. I've checked the documentation, and nothing seems to work. Any ideas on how to implement this?

Answer 1

You can use a page template: https://www.telerik.com/kendo-react-ui/components/grid/pdf-export/page-template/

Here I have defined a template such that it will only render for page 1:

const PageTemplate = props => {
  if (props.pageNum === 1) {
    return <div style={{
      position: "absolute",
      top: "10px",
      left: "10px"
    }}>
      STUDENTS DEPARTMENT TABLE, DEPARTMENT OF ENGINEERING, 2023
    </div>;
  }
};

Then specify it as an option in the GridPDFExport definition:

<GridPDFExport
  pageTemplate={PageTemplate}
>
 {grid}
</GridPDFExport>