Export API & Triggers

The service takes rows, not a grid

GridExportService.export(format, columns, rows, filename) writes whatever you give it. Inject it, pass the rows you want and the columns you want them under, and you get a file. This is how you export a selection, a computed summary, or data the grid never displayed.

It exports the columns you hand it

This is the one difference from the toolbar. grid.export() resolves its columns from the grid, so a column the user hid is not in the file. A direct service call has no grid to ask: it uses your list, in your order, dropping only columns marked excludeFromExport: true and columns with nothing to read.

Where the selection comes from

(selectionChange) emits the full array of selected rows after every change — click, shift-click range, select-all. Keep it in a signal and your button knows both how many rows are selected and which ones.

The grid holds a page; your source holds the dataset

This grid is in scrollMode: 'paging' with a page size of 20, so its own CSV button writes 20 rows. The second button asks the data source for everything in one request and exports that instead — 500 rows, from the same 20-row grid.

Sorts and filters are yours to pass

fetchRows takes { offset, limit, sorts, filters }. Pass the grid's current sort and filter state to export what the user is looking at, or leave them empty for the unfiltered set. Nothing about the grid changes — you are calling your own source.

Two million rows: let your server build the file

Fetching everything into the browser stops being reasonable at some point. Past that point, the file is your server's job: it queries, writes the bytes, and returns them. The grid contributes nothing to this, and there is no configuration for it — it is ordinary Angular:

// export.service.ts
@Injectable({ providedIn: 'root' })
export class ReportExport {
  private readonly http = inject(HttpClient);

  // Your endpoint returns the finished file. Send the same sorts and filters the
  // grid is using, so the server-built file matches what the user is looking at.
  download(sorts: SortConfig[], filters: FilterState): void {
    const qp = new HttpParams()
      .set('sorts',   JSON.stringify(sorts))
      .set('filters', JSON.stringify(filters));

    this.http.get('/api/employees/export.csv', { params: qp, responseType: 'blob' })
      .subscribe(blob => {
        const url = URL.createObjectURL(blob);
        const a   = document.createElement('a');
        a.href = url;
        a.download = 'employees.csv';
        a.click();
        URL.revokeObjectURL(url);
      });
  }
}

Use this when the row count is large enough that the browser should never see it, or when the file needs something a client cannot do — a template, a signature, a second data source.

showInToolbar: false

Hides the built-in buttons and leaves the rest of config.export in force — this grid still exports as employees.csv, because filename is still set. Look at the grid's header area: there is no CSV button on it.

gcExport puts the trigger anywhere

[gcExport] is the format, [gcExportTarget] is the grid. Attach them to any element — a button in your own toolbar, a menu item, something in a completely different part of the page. A template reference is the shortest way to name the grid:

<button [gcExport]="'csv'" [gcExportTarget]="grid">Download CSV</button>
<gridcraft #grid [columns]="columns" [config]="config" />

The rows and columns are the grid's, exactly as the toolbar button would have exported them.

No export config needed

This grid has no export block at all — read its code tab and you will not find one. grid.export('csv') works anyway. The config only ever controlled the toolbar; the method is always there.

Get the grid, call the method

viewChild(GridcraftComponent) — or a named reference when the component holds more than one grid — gives you the instance. export(format) takes it from there, using the grid's current rows, filters, sorts and visible columns.

Wire it to a shortcut

Any event will do. A host binding is the least code:

@Component({
  host: { '(keydown.control.shift.e)': 'exportFromCode()' },
  …
})

With no filename configured the file arrives as export.csv. Set config.export.filename if you want a name, even with no toolbar in play.