Syncfusion AI Assistant

How can I help you?

Custom toolbar in Angular Grid Component

19 Mar 202624 minutes to read

Custom toolbar in Syncfusion® Angular Grid enables the creation of a customized toolbar layout and functionality to match specific application requirements. This is achieved by utilizing the toolbarTemplate property, which provides comprehensive customization options for the toolbar layout and styling. Define a custom template for the toolbar and handle the actions of the toolbar items in the clicked event.

The following example demonstrates rendering the custom toolbar toolbarTemplate property.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, GridModule, GroupService, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';

@Component({
    imports: [ GridModule, ToolbarModule ],
    providers: [ToolbarService, GroupService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' height='200px' [allowGrouping]='true' [groupSettings]='groupOptions'>
                    <ng-template #toolbarTemplate let-data>
                        <ejs-toolbar (clicked)='clickHandler($event)'>
                            <e-items>
                                <e-item id="collapse" text="Collapse All" prefixIcon="e-chevron-up icon"></e-item>
                                <e-item id="expand" text="Expand All" prefixIcon="e-chevron-down icon"></e-item>
                            </e-items>
                        </ejs-toolbar>
                    </ng-template>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' isPrimaryKey='true' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                        <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public groupOptions?: object;

    @ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
        this.groupOptions = { columns: ['CustomerID'] };
    }

    clickHandler(args: ClickEventArgs): void {
        const target = (args.originalEvent.target as HTMLElement).closest('button'); // find clicked button
        if ((target as HTMLElement).id === 'collapse') {
            // collapse all expanded grouped row
            (this.grid as GridComponent).groupModule.collapseAll();
        }
        if ((target as HTMLElement).id === 'expand') {
            // expand all collapsed grouped row
            (this.grid as GridComponent).groupModule.expandAll();
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Render image with text in custom toolbar

Rendering an image with text in custom toolbar in Syncfusion® Angular Grid enables easy display of an image along with text in the toolbar of the grid. This feature enhances the visual presentation of the grid, providing additional context and improving the overall experience.

Use ng-template along with the DomSanitizer service and the bypassSecurityTrustResourceUrl method to securely present an image as a base64-encoded string.

  • DomSanitizer: Angular’s DomSanitizer service allows marking a value as trusted, enabling secure rendering for specific contexts. This is crucial for preventing XSS attacks.
  • bypassSecurityTrustResourceUrl: Marks a URL—including a base64 image— as safe for use as a resource.

The following example demonstrates rendering an image in the toolbar using ng-template:

import { addImage } from './add';
import { data } from './datasource';
import { deleteImage } from './delete';
import { Component, OnInit, ViewChild } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { EditService, EditSettingsModel, GridComponent, GridModule, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [ 
        GridModule,
        ToolbarModule,
        ButtonModule
        ],
    providers: [ToolbarService, EditService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' height='200px' [editSettings]='editSettings'>
                <ng-template #toolbarTemplate let-data>
                    <div class="image">
                        <img [src]="addImageSource" id="addImage" />
                        <button
                        #addButton
                        class="button"
                        id="addButton"
                        ejs-button
                        cssClass="e-outline"
                        (click)="editAction($event)"
                        >
                        Add
                        </button>
                        <img [src]="deleteImageSource" id="deleteImage" />
                        <button
                        #deleteButton
                        class="button"
                        ejs-button
                        id="deleteButton"
                        cssClass="e-outline"
                        (click)="editAction($event)"
                        >
                        Delete
                        </button>
                    </div>
                </ng-template>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' isPrimaryKey='true' textAlign='Right' width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    @ViewChild('grid')
    public grid: GridComponent;
    public editSettings?:EditSettingsModel ;
    public deleteImageSource?: SafeResourceUrl | undefined;
    public addImageSource?: SafeResourceUrl | undefined;
    constructor(private sanitizer: DomSanitizer) { }

    ngOnInit(): void {
        this.data = data;
        this.editSettings={ allowEditing: true, allowAdding: true, allowDeleting: true }
        this.deleteImageSource = this.sanitizer.bypassSecurityTrustResourceUrl(
            `data:image/png;base64, ${deleteImage}`
        );
        this.addImageSource = this.sanitizer.bypassSecurityTrustResourceUrl(
            `data:image/png;base64, ${addImage}`
        );
    }

    editAction(args: MouseEvent) {
        if ((args.currentTarget as HTMLElement).id === 'addButton') {
            this.grid.addRecord();
        } else {
            var selectedRecord = this.grid.getSelectedRecords()[0];
            this.grid.deleteRecord(selectedRecord as string);
        }
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Styles and layout of the image and text in the custom toolbar can be further adjusted as per specific design requirements.

Render DropDownList in custom toolbar

Render DropDownList in custom toolbar in Syncfusion Angular Grid enables extending the custom toolbar by incorporating a DropDownList component, allowing various actions to be performed within the grid based on selections.

Implement this using ng-template. In the example below, the DropDownList component is included in the custom toolbar. Its change event is bound to an onChange method.

In the onChange method, the text of the selected item is checked to determine the appropriate action. For example, if Update is chosen, the endEdit method is called to exit the edit mode. If Edit is selected, the selected record is passed to the startEdit method to initiate the edit mode dynamically. Similarly, if Delete is picked, the selected record is passed to the deleteRecord method to remove it from the grid.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChangeEventArgs, DropDownListAllModule, DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { EditService, EditSettingsModel, GridComponent, GridModule, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [GridModule,ToolbarModule,DropDownListAllModule ],
    providers: [ToolbarService, EditService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' height='200px' [editSettings]='editSettings'>
                <ng-template #toolbarTemplate let-data>
                <div style="display: flex">
                    <label style="padding: 10px 10px 26px 0">
                        Change the value:
                    </label>
                    <ejs-dropdownlist #dropDown style="margin-top:5px" (change)="onChange($event)" [dataSource]='dropDownData' [placeholder]='placeholder' width="120px"></ejs-dropdownlist>
                </div>
                    </ng-template>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' isPrimaryKey='true' textAlign='Right' width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public editSettings?:EditSettingsModel ;
    public placeholder = 'Select a value'

    @ViewChild('grid')
    public grid: GridComponent;
    @ViewChild('dropDown')
    public dropDown: DropDownListComponent;

    ngOnInit(): void {
        this.data = data;
        this.editSettings={ allowEditing: true, allowAdding: true, allowDeleting: true }
    }

    public dropDownData = [{ text: 'Edit' }, { text: 'Delete' }, { text: 'Update' }];
    public onChange(args: ChangeEventArgs): void {
        const selectedRow = this.grid.getSelectedRecords()[0];
        if (args.itemData.text === 'Update') {
            this.grid.endEdit();
        }
        if (args.itemData.text === 'Edit') {
            this.grid.startEdit();
        }
        if (args.itemData.text === 'Delete') {
            this.grid.deleteRecord(selectedRow as string);
        }
        (this.dropDown as DropDownListComponent).value = '';
        (this.dropDown as DropDownListComponent).placeholder = args.itemData.text as string;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Render a component or element using the toolbar template

Use ng-template in the Syncfusion Angular Grid to add custom components or elements—such as Button, input fields, or icons—to the toolbar. This offers flexibility for advanced layouts and direct interactions.

To render custom components or elements within the toolbar, use the toolbarTemplate property. This allows the inclusion of other components, such as a Button, and enables specific grid actions based on the button click. For example, when the ExcelExport button is clicked, the excelExport method is called to export the grid to Excel. Similarly, when the PdfExport button is clicked, the pdfExport method is called to export the grid to PDF format. Likewise, when the Print button is clicked, the print method is triggered to print the grid.

The following example demonstrates rendering the Button component in the toolbar using toolbarTemplate property and performing grid action based on the corresponding button click.

Below is an example demonstrating this approach:

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { ExcelExportService, GridComponent, GridModule, PdfExportService, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [GridModule,ToolbarModule, ButtonModule ],
    providers: [ToolbarService, PdfExportService, ExcelExportService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' height='200px'  [allowExcelExport]="true" [allowPdfExport]="true">
                <ng-template #toolbarTemplate let-data>
                    <div id='toolbar'>
                        <button id="excelButton" ejs-button cssClass="e-outline" (click)="exportAction($event)">Excel Export</button>
                        <button id="pdfButton" ejs-button cssClass="e-outline" (click)="exportAction($event)">Pdf Export</button>
                        <button id="printButton" ejs-button cssClass="e-outline" (click)="exportAction($event)">Print</button>
                    </div>
                </ng-template>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' isPrimaryKey='true' textAlign='Right' width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    @ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
    }

    exportAction(args: MouseEvent) {
        if ((args.currentTarget  as HTMLElement).id === 'excelButton') {
            (this.grid as GridComponent).excelExport();
        }
        else if ((args.currentTarget as HTMLElement).id === 'pdfButton') {
            (this.grid as GridComponent).pdfExport();
        }
        else {
            (this.grid as GridComponent).print();
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));