Custom toolbar in Angular Grid component

13 Sep 202524 minutes to read

A custom toolbar in the Syncfusion Angular Grid allows for distinctive toolbar layouts, styles, and functionality tailored to specific application needs, enabling a personalized experience within the Grid.

Achieve customization by using the toolbarTemplate property, which provides extensive options for defining toolbar structure. Use a custom template for the toolbar and handle toolbar item actions in the clicked event.

The sample below demonstrates how to render a custom toolbar using toolbarTemplate:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, GroupService } from '@syncfusion/ej2-angular-grids'
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'




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

@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 the Syncfusion Angular Grid’s custom toolbar enhances visual presentation and provides additional context for an improved 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 you to mark 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 shows how to render an image in the toolbar using ng-template:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, EditService } from '@syncfusion/ej2-angular-grids'
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'




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

@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 you to extend the functionality of the custom toolbar by incorporating a DropDownList component, allowing you to perform various actions within the Grid based on their 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 onChange, evaluate the selected item’s text to determine actions, such as:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, EditService } from '@syncfusion/ej2-angular-grids'
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'




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

@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.

For example, the template can include custom buttons. Clicking the ExcelExport button triggers excelExport, PdfExport triggers pdfExport, and Print triggers print.

Below is an example demonstrating this approach:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService,  PdfExportService, ExcelExportService  } from '@syncfusion/ej2-angular-grids'
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'




import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent } from '@syncfusion/ej2-angular-grids';

@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));