Export Selected Grid Rows to PDF

Environment

Description

How can I export only the selected rows of the Kendo UI for Angular Grid to PDF?

Solution

By default, the PDF generates a file of what is currently visible on the page. To export only the selected Grid rows to PDF:

1. Create a second Grid off-screen and bind its data to the selected rows of the visible Grid.

   Copy Code<div style="position: absolute; top: 0; left: -10000px; width: 500px;">
       <kendo-grid [kendoGridBinding]="mySelection" #pdfGrid>
       ...
       </kendo-grid>
   </div>

2. To store the whole dataItem in the selectedKeys collection, provide a custom callback to the kendoGridSelectBy directive of the visible Grid.

   Copy Code<kendo-grid
       ...
       [kendoGridSelectBy]="selectBy"
       [(selectedKeys)]="mySelection"
   ></kendo-grid>

   Copy Codepublic selectBy = (args: RowArgs) => {
       return args.dataItem;
   };

3. Inside the click handler, export the hidden Grid data to PDF by using the saveAsPDF method of the component.

   Copy Code@ViewChild('pdfGrid') public hiddenGrid: GridComponent;
   
   public onExport() {
       this.hiddenGrid.saveAsPDF();
   }

The following example demonstrates the full implementation of the suggested approach.