Exporting Selected Grid Rows to PDF

Environment

Product

Progress® Kendo UI for Angular Grid

Description

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

This article also answers the following questions:

• How can I export checked rows from the Angular Grid?
• What is the best way to export selected rows from the Angular Grid to PDF?
• How to use selection in the Kendo UI for Angular Grid to export to PDF or Excel?

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.

   html

   <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.

   html

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

   ts

   public 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.

   ts

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

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

Change Theme

Theme

Loading ...

See Also

• Export Selected Rows to Excel
• API Reference of the Grid Component