How do I get a loader/spinner while exporting data of the SlickGrid?

Question

Im using slickgrid (2.12.2) and angular 8. I wanna know how can i show a loader/spinner while the data is been exported to csv, excel or file. Because if the data is large, the exportation take some time, and the person who is using might think that nothing is happening...

Answer 1

I think something like this should work for you. According to the Angular-SlickGrid source, the exportService.exportToFile function returns a promise.

You can set a flag before invoking the function, and use the 'then' block of the returned promise to stop the spinner after the export completes.

@Component({
    ...
})
export class MyComponent {
    loading: boolean = false;

    constructor (private exportService: ExportService ) {
        ...
    }

    exportToCSV (): Promise<bool> {
        return this.exportService.exportToFile({
            ...
        });
    }

    onExportBtnClicked () {
        this.loading = true;

        this.exportToCSV.then(() => {
            // Assuming it succeeds.
            this.loading = false;
        });
    }
}

Angular-SlickGrid also has the following output properties.

  @Output() onGridBeforeExportToFile = this.exportService.onGridBeforeExportToFile;
  @Output() onGridAfterExportToFile = this.exportService.onGridAfterExportToFile;
  @Output() onGridBeforeExportToExcel = this.excelExportService.onGridBeforeExportToExcel;
  @Output() onGridAfterExportToExcel = this.excelExportService.onGridAfterExportToExcel;

Internally, the menu extension for Angular-SlickGrid uses ExportService.exportToFile , which emits an event, which (as shown above) is outputted from the angular-slickgrid component.

@Injectable()
export class ExportService {
    ...
    onGridBeforeExportToFile = new Subject<boolean>();
    onGridAfterExportToFile = new Subject<{ content?: string; filename: string; format: string; useUtf8WithBom: boolean; }>();
}

They are public so you can access them on the ExportService directly. You can set your spinner flag to true when onGridBeforeExportToFile emits an event, and false when onGridAfterExportToFile emits.

To summarise, the export service is the source of all things related to exporting for the Angular-SlickGrid library, whether you click a custom-made button to export, or click 'Export in CSV format' from the menu extension, etc.

Answer 2

Note that I'm the author of Angular-Slickgrid. From the question and answer that I saw, it seems that I was missing this feature explained in my Wikis (there are a lot of Wikis, please read them) and so I updated both Wikis Export to Excel and Export to File (CSV/TabDelimited) , the Grouping Example is the only demo showing this feature because that is the only one that can have lots of data (if you choose to use 50k rows from the demo and use grouping).

Here's the updated Wiki for the Excel Export

Option 1 (recommended)

View

<span [hidden]="!processing">
   <i class="fa fa-refresh fa-spin fa-lg fa-fw"></i>
</span>

<angular-slickgrid gridId="grid2"
                     [dataset]="dataset"
                     [columnDefinitions]="columnDefinitions"
                     [gridOptions]="gridOptions"
                     (onGridBeforeExportToExcel)="processing = true"
                     (onGridAfterExportToExcel)="processing = false"
                     (onAngularGridCreated)="angularGridReady($event)">
</angular-slickgrid>

Component

export class MyComponent() implements OnInit {
  processing = false;
}

As per @Wingnod's answer you can also subscribe to the event in your code, but it's better to simply use the Event Emitters (onGridBeforeExportToExcel) since you won't need to care about the unsubscribe and the code is cleaner. If for some reason you do wish to subscribe to the event, you can do it this way

Option 2 (not recommended)

View

<angular-slickgrid gridId="grid2"
        [dataset]="dataset"
        [columnDefinitions]="columnDefinitions"
        [gridOptions]="gridOptions"
        (onAngularGridCreated)="angularGridReady($event)">
</angular-slickgrid>

Component

export class GridGroupingComponent implements OnInit, OnDestroy {
  exportBeforeSub: Subscription;
  exportAfterSub: Subscription;

  ngOnDestroy() {
    this.exportBeforeSub.unsubscribe();
    this.exportAfterSub.unsubscribe();
  }

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;

    // display a spinner while downloading
    this.exportBeforeSub = this.angularGrid.exportService.onGridBeforeExportToFile.subscribe(() => this.processing = true);
    this.exportAfterSub = this.angularGrid.exportService.onGridAfterExportToFile.subscribe(() => this.processing = false);
  }
}

You can see that Option 1 is a lot cleaner and easier to implement.