Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Silvia Ivanova
220
Export only shown data to excel
posted

Hello, I have a simple igx-grid where grid data can be exported to excel.

With the IgxExcelExporterService I can export all data. But I need to export only the data that is shown after filtering/sorting/hidden or pinned columns etc.

Is it possible to export only filtered/sorted data to an excel file with a specific name like in the example below? Hidden columns should not be exported. Pinned columns should be exported as shown in the grid.

Here is my igx-grid:

  <igx-grid igxPreventDocumentScroll
            #grid1
            igxOverlayOutlet
            [height]="'97%'"
            width="99%"
            style="margin-top: 1%; margin-left: 0.5%; margin-right: 0.5%;"
            [emptyGridMessage]="'Das Gitter ist leer'"
            [hiddenColumnsText]="'Ein-/Ausblenden'"
            [pinnedColumnsText]="'pinned'"
            [batchEditing]="true"
            [autoGenerate]='false'
            [data]="myData"
            [primaryKey]="'id'"
            [showToolbar]="true"
            [allowFiltering]="true"
            [columnHiding]="true"
            [rowHeight]="20"
            filterMode="excelStyleFilter"
            (cellEditDone)="cellEditDoneHandler($event)"
            (activeNodeChange)="handleChange()">
            
            <igx-column width="92px" field="id" dataType="string" header="Id" [resizable]="true" [sortable]="true" [editable]="false" [movable]="true" [cellClasses]="greenRowLotClass">
            </igx-column>
        
            <igx-column width="112px" field="city" dataType="string" header="City" [resizable]="true" [sortable]="true" [editable]="false" [movable]="true" [cellClasses]="greenRowLotClass">
            </igx-column>
        
            <igx-column width="80px" field="country" dataType="string" header="Country" [resizable]="true" [sortable]="true" [editable]="false" [movable]="true" [cellClasses]="greenRowLotClass">
            </igx-column>
            
     </igx-grid>

And here is the IgxExcelExporterService that I use for the export.

    this.excelExportService.exportData(this.myData, new IgxExcelExporterOptions(ConfigConstants.EXCEL_EXPORT_FILENAME));

Thank you.

Parents
No Data
Reply
  • 700
    Verified Answer
    Offline posted

    Hello Silvia,

    Thank you for posting in our community!

    I have been looking into your question and what I could say, as mentioned in our Customizing the Exported Content section here, is that when you are exporting data from the Grid component, the export process takes into account features like row filtering, column hiding, sorting, etc., and exports only the data visible in the Grid. However, in order to achieve this, the grid object should be passed in the export method of the excelExportService like the following:

    this.excelExportService.export(this.grid, new IgxExcelExporterOptions('ExportedDataFile'));

    Furthermore, you could configure the exporter service to include pinned columns and exclude hidden columns by setting properties on the IgxExcelExporterOptions object.

    Exporting the pinned columns and excluding the hidden ones could be achieved by using the following lines of code:

    public export() {

  const options = new IgxExcelExporterOptions('CustomFileName');

  options.ignorePinning = true;
  options.ignoreColumnsVisibility = false;

  this.excelExportService.export(this.grid, options);
}

    The above code also sets the excel file’s name to “CustomFileName”.

    Additionally, in case you are using the IgxToolbarComponent for exporting data to Excel, another approach is using the IgxGridComponent’s toolbarExporting event and configuring the ignorePinning and the ignoreColumnsVisibility options like the following:

    // component.html

<igx-grid #grid [data]="data" (toolbarExporting)="onToolbarExporting($event)"></ igx-grid>
     

    // component.ts

  public onToolbarExporting(args: IGridToolbarExportEventArgs) {
  
    args.options.ignorePinning = true;
    args.options.ignoreColumnsVisibility = false;
  }

    Please test it on your side and let me know if you need any further assistance regarding this matter.

    Sincerely,
    Riva Ivanova
    Entry Level Software Developer

Children