Grid Export Selected Records
JavaScriptJavaScriptAngularAngularVueVueReactReact

Grid for Angular

Angular standalone version of this topic (compatible with Angular 17+). Import both the Smart UI component and module in the standalone component.

What this topic covers: practical setup, the framework-specific API access pattern, and copy-adapt guidance for the examples in this page.

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { GridComponent, GridModule } from 'smart-webcomponents-angular/grid';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, GridModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  @ViewChild('grid', { read: GridComponent, static: false }) grid!: GridComponent;
}
<!-- app.component.html -->
<smart-grid #grid></smart-grid>

Use this.grid for API methods in this topic.

Export Selected Records in Grid Component

Smart.Grid's export functionality allows the export of all data in various formats (such as XLSX, PDF, and HTML), as well as the export of only particular records of the Grid. This help topic shows how to export only the data of selected rows in the Grid.

The following TypeScript code shows how to export selected Grid rows to XLSX. Its functionality is detailed below.

const grid = <Grid>document.getElementById('grid'),
    selection = this.grid.getSelection(); // (1)
let rowIdsToExport: (string | number)[];

if (selection.rows) {
    rowIdsToExport = selection.rows.map((rowInfo: any) => rowInfo.row.id); // (2)
}
else {
    rowIdsToExport = [];
}

this.grid.dataExport!.rowIds = rowIdsToExport; //(3)
this.grid.exportData('xlsx'); //(4)
  1. We get the Grid's selected row's by calling the method getSelection. If any records are selected, the object returned by this method contains a rows field - an array of objects with information about selected rows.
  2. This selected rows array is then converted to an array of row ids via map.
  3. The array of row ids to export is passed to the Grid's dataExport.rowIds property. Its default value is null, meaning that all records will be exported.
  4. Finally, the Grid's exportData method is called. In this case, the selected rows are exported to XLSX, but the Grid can also be exported to CSV, HTML, JPEG, PNG, JSON, PDF, TSV, and XML.

Note: If at a later time you wish to export all Grid rows, the dataExport.rowIds has to be reset by setting it to null.

For AI tooling

Developer Quick Reference

Topic: grid-export-selected-records   Component: Grid   Framework: Angular

Main methods: getSelection(), exportData()

Common config keys: (none detected)

Implementation Notes

Compatibility: Angular 17+ (standalone)   API access pattern: @ViewChild(...) + this.component.method()

Lifecycle guidance: Bind inputs declaratively and call imperative API through @ViewChild in/after ngAfterViewInit.

Common pitfalls:

  • Using @ViewChild API too early (before view init).
  • Omitting standalone imports for Smart modules in @Component.imports.
  • Type mismatches between configuration fields and template bindings.

Validation checklist:

  • Ensure module import exists in standalone component imports array.
  • Use typed @ViewChild(..., { read: ComponentType }).
  • Call imperative methods after view initialization.