print grid header footer

Question

Hi,When use the print button in grid, by default, it only prints the data in grid. How could I add header and footer in the print out?Thanks

Vinitha Balasubramanian · Answer

Hi Tingting,Greetings from Syncfusion support.Query : Print grid header footerWe have analyzed your query, you want to add header and
footer to the Grid component. You can achieved your requirement using pdfExportProperties
to add header and footer. Once pdfExport action had been completed, then you
can print the exported document using (“Ctrl + P”).Kindly refer the code and sample for your references.

[index.js]
  toolbarClick(args) {
      this.grid.pdfExport(this.getPdfExportProperties());
    }
   
    getPdfExportProperties() {
      return {
        header: {
          fromTop: 0,
          height: 120,
          contents: [
            {
              type: 'Text',
              value: 'INVOICE',
              position: { x: 280, y: 0 },
              style: { textBrushColor: '#C25050', fontSize: 25 },
            },
          ],
        },
        footer: {
          fromBottom: 160,
          height: 100,
          contents: [
            {
              type: 'Text',
              value: 'Thank you for your business !',
              position: { x: 250, y: 20 },
              style: { textBrushColor: '#C67878', fontSize: 14 },
            },
            {
              type: 'Text',
              value: '! Visit Again !',
              position: { x: 300, y: 45 },
              style: { textBrushColor: '#C67878', fontSize: 14 },
            },
          ],
        },
        fileName: 'pdfdocument.pdf',
      };
    }

Documentation link : https://ej2.syncfusion.com/react/documentation/grid/pdf-export/adding-header-and-footer/Sample link : https://stackblitz.com/edit/react-q8gvv9?file=index.jsPlease get back to us, if you need any further assistance.Regards,Vinitha Balasubramanian