New to Kendo UI for Angular? Start a free 30-day trial

Export Selected Grid Rows to PDF


ProductProgress® Kendo UI for Angular Grid


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


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.

    <div style="position: absolute; top: 0; left: -10000px; width: 500px;">
        <kendo-grid [kendoGridBinding]="mySelection" #pdfGrid>
  2. To store the whole dataItem in the selectedKeys collection, provide a custom callback to the kendoGridSelectBy directive of the visible Grid.

    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.

    @ViewChild('pdfGrid') public hiddenGrid: GridComponent;
    public onExport() {

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

View Source
Change Theme:

In this article

Not finding the help you need?