Export tree grid with a text in pdf format

[Vinoth Kumar Sundara Moorthy]

Can you let's say use this tree grid component together with a text such that the grid is exported as part of a text document in pdf format?

Link: https://www.reddit.com/r/reactjs/comments/lfvt5b/exporting_react_treegrid_with_complete/

[Padmavathy Kamalanathan]

Hi Customer, 

 

Thanks for contacting Syncfusion Support. 

 

Query: Export tree grid with a text in pdf format 

 

We have achieved your requirement by adding the text content to “content” in the header property of “PdfExportProperties” and calling the “pdfExport” method by passing this PdfExportProperties as parameter to it. 

 

Please check the below code snippet, 

 

<TreeGridComponent 

dataSource={sampleData} 

ref={treegrid => (this.treegridInstance = treegrid)} 

treeColumnIndex={1} 

childMapping="subtasks" 

toolbar={this.toolbarOptions} 

toolbarClick={this.toolbarClick.bind(this)} 

height="410" 

allowPdfExport={true} 

> 

<Inject services={[Toolbar, PdfExport]} /> 

</TreeGridComponent> 

  toolbarClick(args) { 

    if (args.item.id == this.treegridInstance.grid.element.id + "_pdfexport") { 

      let contentValue = document.getElementById("textcontent1").innerText; 

      // contentValue is your text content 

      const exportProperties = { 

        header: { 

          contents: [ 

            { 

              position: { x: 0, y: 50 }, 

              style: { textBrushColor: "#000000", fontSize: 13 }, 

              type: "Text", 

              value: contentValue 

            } 

          ], 

          fromTop: 0, 

          height: 130 

        } 

      }; 

      this.treegridInstance.pdfExport(exportProperties); 

    } 

  } 

 

Please check the below sample and screenshot, 

 

Sample: https://stackblitz.com/edit/react-pdf-export?file=index.js  

 

Screenshot: 

 

 

Please check the below help documentation, 

https://ej2.syncfusion.com/react/documentation/treegrid/pdf-export/#how-to-write-a-text-in-headerfooter  

 

If the above solution does not meet your requirement, kindly get back to us with detailed explanation of your requirement. 

 

Regards, 

Padmavathy Kamalanathan