Toolbar items in Angular Grid component

17 Sep 202524 minutes to read

The Syncfusion Angular Grid features a flexible toolbar that supports both built-in and custom items. This toolbar, positioned above the grid, allows quick access to various actions and functionalities.

Built-in Toolbar Items

Use built-in toolbar items in the Syncfusion Angular Grid to provide standard operations. Add these items by configuring the toolbar property as a collection of item names. Each built-in item appears as a button with an icon and a label. The following table lists built-in toolbar items and their default actions:

Built-in Toolbar Items Actions
Add Adds a new row to the Grid.
Edit Enables editing mode for the selected row in the Grid.
Update Saves any changes made during editing mode.
Delete Deletes the selected record from the Grid.
Cancel Discards modifications made during editing mode.
Search Displays a search box to filter Grid records.
Print Prints the Grid content.
ColumnChooser Opens a dialog to select column visibility.
PdfExport Exports Grid data as a PDF file.
ExcelExport Exports Grid data as an Excel file.
CsvExport Exports Grid data as a CSV file.

The example below enables built-in toolbar items like Print and Search:

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


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

@Component({
imports: [
        
        GridModule
    ],

providers: [ToolbarService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' height='270px' [toolbar]='toolbar'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' 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 toolbar?: ToolbarItems[];

    ngOnInit(): void {
        this.data = data;
        this.toolbar = ['Print', 'Search'];
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The toolbar property supports configuring both built-in and custom items.

Show Only Icons in Built-in Toolbar Items

Display only icons for built-in toolbar buttons by hiding button text with the following CSS:

.e-grid .e-toolbar .e-tbar-btn-text, 
.e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
    display: none;   
}

This is demonstrated in the following sample:

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




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

@Component({
imports: [
        
        GridModule
    ],

providers: [ToolbarService, EditService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' height='270px' [editSettings]='editSettings' [toolbar]='toolbar'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90 isPrimaryKey='true'></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 toolbar?: ToolbarItems[];
    public editSettings?: EditSettingsModel;

    ngOnInit(): void {
        this.data = data;
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true }; 
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customize Built-in Toolbar Items

The Syncfusion Angular Grid enables customization of built-in toolbar items—such as adding, removing, or updating their actions and behavior. Handle toolbar button actions using the toolbarClick event.

The example below disables the default Add button action and displays a custom message when it is clicked:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, ToolbarItems, EditSettingsModel } from '@syncfusion/ej2-angular-grids';
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';

@Component({
imports: [GridModule],

providers: [ToolbarService],
standalone: true,
    selector: 'app-root',
    template: `
    <div style="margin-left:180px"><p style="color:red;" id="message">{{message}}</p></div>
    <ejs-grid id='Grid' [dataSource]='data' height='270px' [toolbar]='toolbar' [editSettings]='editSettings' (toolbarClick)='clickHandler($event)'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' 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 toolbar?: ToolbarItems[] | object;
    public editSettings?: EditSettingsModel;
    public message?: string;

    ngOnInit(): void {
        this.data = data;
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    }

    clickHandler(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_add') { // 'Grid_add' -> Grid component id + _ + toolbar item name
            args.cancel = true;
            const newRecord = {
                OrderID: 10247,
                CustomerID: 'TOMSP',
                ShipName: 'Hanari Carnes',
                ShipCity: 'Lyon',
            };
            (this.grid as GridComponent).addRecord(newRecord);
            this.message = 'The default adding action is cancelled, and a new record is added using the addRecord method.';
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Custom Toolbar Items

Custom toolbar items enable the addition of defined functionality and UI controls to the Grid toolbar. Define the toolbar property with an array of ItemModel objects. Assign actions to each custom item through the toolbarClick event.

By default, custom items are aligned to the left of the toolbar. Change their position using the align property. The example below aligns the Collapse All item to the right:

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




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

@Component({
imports: [
        
        GridModule
    ],

providers: [ToolbarService, GroupService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' height='200px' [allowGrouping]='true' [groupSettings]='groupOptions' [toolbar]='toolbar' (toolbarClick)='clickHandler($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' 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 toolbar?: object[];
    public groupOptions?: GroupSettingsModel;

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

    ngOnInit(): void {
        this.data = data;
        this.toolbar = [{ text: 'Expand All', tooltipText: 'Expand All', prefixIcon: 'e-expand', id: 'expandall' },
         { text: 'Collapse All', tooltipText: 'collection All', prefixIcon: 'e-collapse-2', id: 'collapseall', align: 'Right' }];
        this.groupOptions = { columns: ['CustomerID'] };
    }

    clickHandler(args: ClickEventArgs): void {
        if (args.item.id === 'expandall') {
            (this.grid as GridComponent).groupModule.expandAll();
        }

        if (args.item.id === 'collapseall') {
            (this.grid as GridComponent).groupModule.collapseAll();
        }  
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • The toolbar property supports built-in and custom items.
  • If a toolbar item does not match a built-in name, it is treated as a custom toolbar item.

Both Built-in and Custom Items in Toolbar

Combine built-in and custom toolbar items for full flexibility. Specify the toolbar property as an array containing both strings (for built-in items) and objects (for custom items). For instance, use built-in items like Add, Edit, Delete, Update, Cancel, and a custom button Click:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { ToolbarService, EditService } from '@syncfusion/ej2-angular-grids'
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ToolbarItems,EditSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule
    ],

providers: [ToolbarService, EditService],
standalone: true,
    selector: 'app-root',
    template: `
    <div style="margin-left:180px"><p style="color:red;" id="message">{{message}}</p></div>
    <ejs-grid [dataSource]='data' height='270px' [toolbar]='toolbar' [editSettings]='editSettings' (toolbarClick)='clickHandler($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' 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 toolbar?: ToolbarItems[] | object;
    public editSettings?: EditSettingsModel;
    public message?: string;

    ngOnInit(): void {
        this.data = data;
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel',
         { text: 'Click', tooltipText: 'Click', prefixIcon: 'e-expand', id: 'Click' }];
    }

    clickHandler(args: ClickEventArgs): void {
        if (args.item.id === 'Click') {
            this.message = `Custom Toolbar Clicked`;
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Add Custom Components to the Grid Toolbar Using Template

Add components such as AutoComplete to the Grid toolbar using the template property of the ItemModel. With ng-template and Angular’s @ViewChild, you can embed interactive controls such as dropdowns or search fields. In the sample below, an AutoComplete is shown in the toolbar for filtering Grid records by *ShipCity:

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GridModule, AutoCompleteAllModule],
  providers: [ToolbarService, EditService],
  template: `
    <ejs-grid #grid id="grid" [dataSource]="data" height="270px" [toolbar]="toolbar" [editSettings]="editSettings">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="90" isPrimaryKey="true"></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>

      <ng-template #customToolbarTemplate>
        <ejs-autocomplete id="shipCityValue" [dataSource]="dropDownData" placeholder="Search ShipCity" (change)="onChange($event)" >
        </ejs-autocomplete>
      </ng-template>
  </ejs-grid>`
})

export class AppComponent implements OnInit {
  @ViewChild('customToolbarTemplate', { static: true }) public customToolbarTemplate!: TemplateRef<any>;
  @ViewChild('grid') public grid?: GridComponent;
  public data?: object[];
  public toolbar?: (ToolbarItems | object)[];
  public editSettings?: EditSettingsModel;
  public dropDownData: string[] = [
    'Reims',
    'Münster',
    'Rio de Janeiro',
    'Lyon',
    'Charleroi',
    'Bern',
    'Genève',
    'San Cristóbal',
    'Graz',
    'México D.F.',
    'Albuquerque',
    'Köln'
  ];

  ngOnInit(): void {
    this.data = data;
    this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal'};
    this.toolbar = [
      'Add',
      'Edit',
      'Delete',
      {
        template: this.customToolbarTemplate,
        tooltipText: 'Custom component autocomplete',
        align: 'Left',
      },
    ];
  }

  onChange(event: ChangeEventArgs): void {
    const selectedCity = (event.value as string );
    // perform search action for ShipCity column.
    (this.grid as GridComponent).search(selectedCity);
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Custom Toolbar Items in a Specific Position

Adjust the alignment of custom toolbar items using the align property. In the next sample, Collapse All is right-aligned, Expand All is left-aligned, and Search is center-aligned:

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




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

@Component({
imports: [
        
        GridModule
    ],

providers: [ToolbarService, GroupService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='employeeData' height='200px' [allowGrouping]='true' [groupSettings]='groupOptions' [toolbar]='toolbar' (toolbarClick)='clickHandler($event)'>
                <e-columns>
                    <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=80></e-column>
                    <e-column field='FirstName' headerText='First Name' width=100></e-column>
                    <e-column field='Country' headerText='Country' width=100></e-column>
                    <e-column field='PostalCode' headerText='Postal Code' width=100></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public employeeData?: object[];
    public toolbar?: object[];
    public groupOptions?: GroupSettingsModel;

    @ViewChild('grid')
    public grid?: GridComponent;
 
    ngOnInit(): void {
        this.employeeData = employeeData;
        this.toolbar = [{ text: 'Expand All', tooltipText: 'Expand All', prefixIcon: 'e-expand', id: 'expandall' },
        { text: 'Collapse All', tooltipText: 'collection All', prefixIcon: 'e-collapse-2', id: 'collapseall', align: 'Right' }, { text: 'Search', align: 'Center' }];
        this.groupOptions = { columns: ['FirstName'] };
    }

    clickHandler(args: ClickEventArgs): void {
        if (args.item.id === 'expandall') {
            (this.grid as GridComponent).groupModule.expandAll();
        }

        if (args.item.id === 'collapseall') {
            (this.grid as GridComponent).groupModule.collapseAll();
        }  
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));