Grid Toolbar

The Grid in Ignite UI for Angular provides an IgxGridToolbarComponent which is essentially a container for UI operations. The toolbar is located at the top of the grid and it matches the grid's horizontal size. The toolbar container hosts different UI controls which are related to some of the grid's features - column hiding, column pinning, excel exporting, etc.

Demo


The IgxGrid's toolbar is shown using the grid's showToolbar property - just set it to true. The toolbar supports a textual title which is left aligned and its content is set using the grid's toolbarTitle property. The following code snippet demonstrates how to enable a toolbar and set its title:

<igx-grid [data]="data" [autoGenerate]="true" height="400px" width="600px"
    [showToolbar]="true"
    toolbarTitle="Grid Title">
</igx-grid>

Features

The IgxGrid's toolbar can be configured to allow columns hiding, columns pinning and exporting data to MS Excel and CSV. You can enable each feature independently by setting its dedicated boolean property to true:

There are also properties for configuring each button's text and they are listed in the API section below.


The following code snippet demonstrates how to enable all features of the toolbar:

<igx-grid [data]="data" [autoGenerate]="true" height="400px" width="600px"
    [showToolbar]="true"
    toolbarTitle="Grid Title"
    [columnHiding]="true"
    [columnPinning]="true"
    [exportExcel]="true"
    [exportCsv]="true"
    exportText="Export"
    exportExcelText="Export to Excel"
    exportCsvText="Export to CSV">
</igx-grid>

The export to MS Excel and the export to CSV features are using respectively the IgxExcelExporterService and IgxCsvExporterService as providers. If you need to use any of them you should specify them in the providers array of your app.module.ts file. For example the following code snippet demonstrates how to include all exporter services:

// app.module.ts

...
import { IgxExcelExporterService, IgxCsvExporterService } from "igniteui-angular";

@NgModule({
  providers: [ IgxExcelExporterService, IgxCsvExporterService ]
})

export class AppModule {}

Customizing the Export

In addition to simply switching on and off the toolbar features, the export process can be further configured in the onToolbarExporting event which is emitted when the user initiates the export process. This event exposes both the exporter and the exporter's options.

Note

By default when exporting to CSV the exporter exports using a comma separator and uses a '.csv' extension for the output file. You can customize these exporting parameters by subscribing to events of the exporter or changing the values of the exporter options fields. You can also cancel the export process by setting the cancel field of the event args to true.

The following code snippet demonstrates how to subscribe to the onToolbarExporting event and cancel the default exporting process.

<igx-grid ... (onToolbarExporting)="toolbarExportingHandler($event)"></igx-grid>
import { IgxExcelExporterService, IgxCsvExporterService } from "igniteui-angular";

...

public toolbarExportingHandler(args) {
    // You can customize the exporting from this event
    const options: IgxExporterOptionsBase = args.options ;
    options.fileName = "Custom Title";

    if (options instanceof IgxExcelExporterOptions) {
        const excelOptions = options as IgxExcelExporterOptions;
        excelOptions.columnWidth = 10;
    } else {
        const csvOptions = options as IgxCsvExporterOptions;
        csvOptions.fileType = CsvFileTypes.TSV;
        csvOptions.valueDelimiter = "\t";
    }

    args.exporter.onColumnExport.subscribe((columnArgs: IColumnExportingEventArgs) => {
        // Don't export image fields
        columnArgs.cancel = columnArgs.header === "Avatar" ||
                            columnArgs.header === "CountryFlag";
    });
}

The following sample demonstrates how to customize the exported files:


Custom Content Template

If you need to add some application specific UI to the toolbar (like custom buttons for example) you may create an ng-template and mark it with the igxToolbarCustomContent directive. The following code snippet demonstrates how to define such custom template:

<igx-grid [showToolbar]="true" ...>

    ...

    <ng-template igxToolbarCustomContent let-igxGrid="grid">
        <button igxButton="flat" igxRipple igxRippleCentered="true" (click)="igxGrid.clearSort()">
            <igx-icon fontSet="material">clear</igx-icon>
            Clear Sort
        </button>
    </ng-template>
</igx-grid>
Note

The igxToolbarCustomContent directive's context contains two properties: grid - a reference to the IgxGridComponent containing the toolbar and toolbar - a reference to the IgxGridToolbarComponent

The following sample demonstrates how to add an additional button to the toolbar to clear the sorting set by clicking on the columns' headers:


API References

The Grid Toolbar service has a few more APIs to explore, which are listed below.

IgxGridToolbarComponent

IgxGridComponent properties:

IgxGridComponent events:

Styles:

Additional Resources

Our community is active and always welcoming to new ideas.

View page on GitHub