How to use dropdown button for export to excel and pdf from grid?

[AbhijeetD]

Hello,

How can we use dropdown buttons to show export to excel and export to pdf options in grid's header? I'm not able to visualize how to use kendoGridExcelCommand and kendoGridPdfCommand in dropdown button.

 

[Hetali]

Hello Abhijeet,

Yes, you can use the Kendo UI DropDownButton in the Grid's Toolbar to export to Excel and PDF. Instead of using the kendoGridExcelCommand and the kendoGridPdfCommand directive, use the saveAsExcel and the saveAsPDF method. For example:

<kendo-grid #grid>
  <ng-template kendoGridToolbarTemplate>
    <kendo-dropdownbutton 
      [data]="export" 
      [popupSettings]="{ appendTo: 'component' }" 
      (itemClick)="exportItemClick($event, grid)"
    >
      Export
    </kendo-dropdownbutton>
  </ng-template>
  <kendo-grid-pdf fileName="Products.pdf" [allPages]="true" paperSize="A4" [repeatHeaders]="true" [landscape]="true"></kendo-grid-pdf>
  <kendo-grid-excel fileName="Products.xlsx"></kendo-grid-excel>
</kendo-grid>

public export = [{
    id: 1,
    text: "Export to Excel",
    svgIcon: fileExcelIcon
 }, {
    id: 2,
    text: "Export to PDF",
    svgIcon: filePdfIcon
}];

public exportItemClick(e, grid: GridComponent) {
  if(e.id === 1) {
    grid.saveAsExcel();
  } else if(e.id === 2) {
    grid.saveAsPDF();
  }
}

I have demonstrated the above discussed approach in this StackBlitz example. Please give it a try and let me know if it helps or if I can further assist you.

To change the style or format of the data in the exported files and populate certain columns (exclude the action button columns), take a look at the following:

For Customizing Exported Columns in PDF export, add the ColumnComponent or the ColumnGroupComponent inside the PDFComponent. For example:

<kendo-grid-pdf fileName="Products.pdf">
  <kendo-grid-column field="ProductName" title="Name" [width]="250">
  </kendo-grid-column>
  <kendo-grid-column field="Category.CategoryName" title="Category">
  </kendo-grid-column>
  <kendo-grid-column field="UnitPrice" title="Price" [width]="80" format="{0:c}">
  </kendo-grid-column>
</kendo-grid-pdf>

For Customizing Export Columns in Excel Export, use the ColumnComponent of the Excel Export as seen below:

<kendo-grid-excel fileName="Products.xlsx">
  <kendo-excelexport-column field="ProductName" title="Name" [width]="250">
  </kendo-excelexport-column>
  <kendo-excelexport-column field="Category.CategoryName" title="Category">
  </kendo-excelexport-column>
  <kendo-excelexport-column field="UnitPrice" title="Price" [width]="80" [cellOptions]="{ format: '$0.00' }">
  </kendo-excelexport-column>
</kendo-grid-excel>

The above snippets will export three columns in their respective files.

I have updated the StackBlitz example where customized columns are exported in the PDF and Excel files.

Additionally, to receive a faster turnaround in the future (within 24 hours for DevCraft Ultimate license), please open a Support Ticket instead of a Forum post.

Regards,
Hetali
Progress Telerik

[AbhijeetD]

Thank you Hetali!

What should i do to control the columns it shows in pdf/excel?

Or if i want to change the style/format of any data?

SaveAsPDF also includes a column which has a couple of action buttons, how can I exclude that column from getting populated in pdf?

 

[Hetali]

Hi Abhijeet,

I have modified the above answer with the solution to export customized columns. Please give the discussed approach a try and let me know if I can further assist you.

Regards,
Hetali
Progress Telerik