Export PDF / CSV

Question

I want to export pdf of a table , having 15 columns. Run time when click on PDF , Ask from user for Column selection which column should be in pdf like check box selection. If user select 10 column out of 15 then pdf generate for 10 columns . How it can be Possible.

Thanks in advance.

Thiyagu Subramani · Accepted Answer

Hi Muhammad, 

Thanks for your update. 

We can achieve this requirement by using getSelectedColumnsUid and getColumnByUid methods in toolbarClick event. In this toolbarClick event we get the all selected column’s Uids and defined this column definitions to the Grid before exporting PDF. Please refer to the below code and sample link. 






this.selectionOptions = { allowColumnSelection: true, type: 'Multiple' }; 
  
toolbarClick(args: any): void { 
    if (args.item.id === 'Grid_pdfexport') { 
     this.refreshCol = (this.grid as any).columns; 
      if (this.grid.getSelectedColumnsUid().length > 0) { 
        var col = []; 
                for (var i = 0; i < this.grid.getSelectedColumnsUid().length; i++) { 
          col.push(this.grid.getColumnByUid(this.grid.getSelectedColumnsUid()[i])) 
        } 
        (this.grid as any).columns = col; 
      } 
      this.grid.pdfExport(); 
    } 
  } 
  pdfExportComplete(args) { 
    (this.grid as any).columns = this.refreshCol;  
  } 

Sample link: https://stackblitz.com/edit/angular-unikhu-ferdc8?file=app.component.ts 

API : https://ej2.syncfusion.com/angular/documentation/api/grid/#getselectedcolumnsuid 
       : https://ej2.syncfusion.com/angular/documentation/api/grid/#getcolumnbyuid 
       : https://ej2.syncfusion.com/angular/documentation/api/grid/#pdfexportcomplete 
       : https://ej2.syncfusion.com/angular/documentation/api/grid/selectionSettingsModel/#allowcolumnselection 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S

Dhivyabharathi Mohan · Answer

Hi Muhammad, 
 
Can you please let us know which EJ2 component you are using to export the pdf of a table? It will be helpful for us to investigate further and provide details. 
 
Regards, 
Dhivya.

Muhammad Arhum Saleem · Answer

Yeah sure, i am using Grid .

Muhammad Arhum Saleem · Answer

this is not same as i mention my query.again , my query is .when click on PDF button on toolbar , ask user which column will be add in PDF export then check that column and those columns which are not check will not be export in PDF file.. is it possible ?Attachment: PDF_4d22a0e0.zip

Thiyagu Subramani · Answer

Hi Muhammad, 

Sorry for the inconvenienced and thanks for your update. 

In previous update we have exported specific (selected) columns using our allowColumnSelection property. By default allowColumnSelection property used to select the columns in Grid. Selected columns are pushed to the empty array and defined to the grid Columns before exporting PDF. Please refer to the below video demonstration for more reference. 

Video demo: https://www.syncfusion.com/downloads/support/forum/162348/ze/video1636375106 

Columns selection : https://ej2.syncfusion.com/angular/documentation/grid/selection/#column-selection 

Likewise you can check/select  the specific columns as per your needs and then move this selected columns to the grid columns like below code in toolbar click event. 





toolbarClick(args: any): void { 
    if (args.item.id === 'Grid_pdfexport') { 
      this.refreshCol = (this.grid as any).columns;  // initially store the grid columns in variable   
      if (this.grid.getSelectedColumnsUid().length > 0) { 
        var col = []; // create empty array 
        //Push your specific columns to the empty array 
        for (var i = 0; i < this.grid.getSelectedColumnsUid().length; i++) { 
          col.push(this.grid.getColumnByUid(this.grid.getSelectedColumnsUid()[i])) 
        } 
        // Assign pushed columns to the grid columns. 
        (this.grid as any).columns = col;  
      } 
      this.grid.pdfExport(); 
    } 
  } 


Sample link: https://stackblitz.com/edit/angular-unikhu-jtdxv4?file=app.component.ts 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S

Muhammad Arhum Saleem · Answer

Thank you for you response. I appreciate your effort. I have seen your demo video. i have applied your suggested code but getting an error.

"Property 'getSelectedColumnsUid' does not exist on type 'GridComponent'."

Muhammad Arhum Saleem · Answer

this is error image.Attachment: error_ba9db3aa.zip

Thiyagu Subramani · Answer

Hi Muhammad, 

Thanks for your update. 

Based on your shared information we suspect the your reported issue may occurred due to the type definition. To achieve this requirement we suggest to use this.grid type as any like below. 






export class AppComponent { 
  public data: Object[] = []; 
  @ViewChild('grid', { static: true }) 
  public grid: GridComponent; 

---------------------------------------------- 
toolbarClick(args: any): void { 
    if (args.item.id === 'Grid_pdfexport') { 
      this.refreshCol = (this.grid as any).columns; 
      if ((this.grid as any).getSelectedColumnsUid().length > 0) { 
        var col = []; 
        for (var i = 0; i < (this.grid as any).getSelectedColumnsUid().length; i++) { 
          col.push(this.grid.getColumnByUid((this.grid as any).getSelectedColumnsUid()[i])) 
        } 
        (this.grid as any).columns = col; 
      } 
      this.grid.pdfExport(); 
    } 
  } 

Sample link: https://stackblitz.com/edit/angular-unikhu-raxadw?file=app.component.ts 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S