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
Anthony Nicoletti
15
IgxGrid - Custom Excel Export is causing the grid's status bar to indefinitely wait for something.
posted

We've implemented a custom excel export and that works but its hang when trying to suppress the standard output when setting the eventArgs.cancel = true;. The grids status bar just keeps waiting for something. With that line commented out we get both the custom and standard exports without the grid hanging, but we only want the custom export.

<igx-grid-toolbar-exporter (exportStarted)="onExportStarted($event)" (exportEnded)="onExportEnded()">
<span excelText>Export to Excel</span>
<span csvText>Export to CSV</span>
</igx-grid-toolbar-exporter>

onExportStarted(eventArgs: IgxExporterEvent): void {
console.log('onExportStarted', eventArgs);

OrderHistoryComponent.customizeGridExport(
eventArgs.exporter, eventArgs.options);

OrderHistoryExporter.exportGridData(
eventArgs.grid, eventArgs.exporter, eventArgs.options);

// There is an Infragistics bug which results in an Export process not finished
// when eventArgs.cancel is set to true.
// Temporarily, comment this out, until Infragistics fixes the bug.
// Until then, we will get 2 exports in 2 files, one custom and one standard.
// eventArgs.cancel = true;
}

I've also created a StackBlitz example where all I did in the onExportStarted event was the eventArgs.cancel = true; and was able to duplicate the status bar hanging with the latest version.

<p class="grid__wrapper">
<igx-grid #igxGrid1 [data]="data" [groupingExpressions]="groupExpressions" [allowFiltering]="true" [cellSelection]="'single'"
[hideGroupedColumns]="true" [width]="'100%'" [height]="'700px'" [moving]="true">
<igx-grid-toolbar>
<igx-grid-toolbar-actions>
<igx-grid-toolbar-exporter [exportExcel]="true" [exportCSV]="true" (exportStarted)="onExportStarted($event)">
</igx-grid-toolbar-exporter>
</igx-grid-toolbar-actions>
</igx-grid-toolbar>

<igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field" [width]="c.width"
[hidden]="c.hidden" [groupable]="c.groupable" [editable]="true" [dataType]="c.dataType">
</igx-column>
</igx-grid>
</p>

onExportStarted(eventArgs: IgxExporterEvent): void {
console.log('onExportStarted', eventArgs);

eventArgs.cancel = true;
}

Is there a better way of doing this, are we missing code that's needed?

Parents
No Data
Reply
  • 400
    Offline posted

    Hello Anthony,

    I have been looking into your question and the behavior you describe is expected. By design, when the exportStarted event is canceled, it terminates the export and a loading line appears above the grid.

    Also, what I want to clarify is when the exportStarted event fires you use a custom function to implement a custom export, I'm assuming this happens with the IgxExcelExporterService and then you call the export() method of the service and then the two files are downloaded. This is expected behavior because you are handling the exportStarted event and it assumes that the export (download) of the excel file has already started, then when you call the export() method of IgxExcelExporterService you export (download) another custom file, making the files two, and in addition, when canceling the event itself, the entire described scenario is obtained.

    What I suggest with your approach when handling the exportStarted event is to use the exporter property of the event and with it you can apply custom logic to export the grid without calling a second export of a second file or canceling the event.

    <igx-grid-toolbar-exporter [exportExcel]="true"(exportStarted)="onExportStarted($event)">
</igx-grid-toolbar-exporter>

    public onExportStarted(event){
    event.exporter.columnExporting.subscribe((args: IColumnExportingEventArgs) => {
      if (args.field === 'ContactTitle') {
          args.cancel = true;
      }
    });
  }

    The second approach I suggest is to create a click event on the span element in the igx-grid-toolbar-exporter component and thus execute a given custom function using the IgxExcelExporterService applying the logic and calling the export() method.

    <span excelText (click)="exportExcelHandler()">Export to Excel</span>

    public exportExcelHandler(){
    this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => {
      if (args.field === 'ContactTitle') {
          args.cancel = true;
      }
    });
    this.excelExportService.export(this.grid, new IgxExcelExporterOptions('ExportedDataFile'));
  }

    In addition, I have prepared small sample illustrating the two approaches which could be found here. Please test it on your side and let me know how it behaves.

    If you require any further assistance on the matter, please let me know.

    Regards,

    Georgi Anastasov

    Entry Level Software Developer

    Infragistics

Children
No Data