Angular Grid - Toolbar Items| Syncfusion

Syncfusion AI Assistant

How can I help you?

11 Jun 202624 minutes to read

The Angular Data Grid includes a customizable toolbar positioned above the grid for accessing various actions and functionalities. Both built-in and custom toolbar items can be added to meet specific application requirements.

Built-in toolbar items in the Angular Data Grid component provide predefined actions to perform standard operations within the grid. These items can be added by defining the toolbar property as a collection of built-in items. Each item is rendered as a button with an icon and text. The following table lists the built-in toolbar items and their respective 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 following example demonstrates enabling built-in toolbar items such as Print and Search in the grid.

app.component.ts
main.ts
import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, ToolbarItems, ToolbarService } 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.

To display only icons in the built-in toolbar items of the grid, use CSS to hide the text portion of the buttons. Add the following CSS style to the application:

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

app.component.ts
main.ts
import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { EditService, EditSettingsModel, GridModule, ToolbarItems, ToolbarService } 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));

The Angular Data Grid component allows customization of the built-in toolbar items to meet specific requirements. This customization can include adding, removing, or modifying toolbar items, as well as handling custom actions when toolbar buttons are clicked.

Customization of built-in toolbar items is achieved using the toolbarClick event of the grid. This event is triggered when any toolbar button is clicked, allowing custom logic to be implemented.

The following example demonstrates customizing the toolbar by disabling and canceling the Add button functionality and showing a custom message when the Add button of toolbar is clicked.

app.component.ts
main.ts
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 in the Angular Data Grid allow addition of personalized functionality to the toolbar. These items can be added by defining the toolbar property as a collection of ItemModel objects. These objects define the custom items and their corresponding actions. The actions for customized toolbar items are defined in the toolbarClick event.

By default, custom toolbar items are positioned on the left side of the toolbar. The position can be changed by using the align property of the ItemModel. The following example demonstrates applying the align property with the value Right for the “Collapse All” toolbar item.

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

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

The toolbar in the Angular Data Grid supports a combination of built-in and custom toolbar items to provide standard and custom actions within the same toolbar.

To use both types of toolbar items, define the toolbar property of the grid as an array that includes both built-in and custom items. Built-in items are specified as strings, while custom items are defined as objects with properties such as text, prefixIcon, and id within the toolbar component.

The following example demonstrates both built-in and custom toolbar items in the grid. The built-in toolbar items include Add, Edit, Delete, Update, and Cancel, while the custom toolbar item is Click.

app.component.ts
main.ts
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));

The Syncfusion Angular Grid provides the flexibility to customize its toolbar by embedding custom components using the template property of the ItemModel. Custom UI elements such as buttons, dropdowns, or input controls can be added directly into the toolbar, alongside built-in actions like Add, Edit, and Delete to enhance user interaction and provide seamless integration with grid operations.

In the following example, an AutoComplete is rendered in the toolbar using an Angular ng-template, which is passed to the toolbar item’s template property through a “TemplateRef”. The AutoComplete is populated with unique “Ship City” values from the grid’s data. When a value is selected from the AutoComplete, the grid is updated by invoking its search method, dynamically filtering the displayed records in the “Ship City” column based on the input. Using ng-template together with Angular’s @ViewChild enables embedding interactive controls such as dropdowns or search fields and controlling the grid programmatically.

Additionally, the change event of the AutoComplete is used to trigger a search operation within the grid. When a value is selected or typed, the event handler invokes the grid’s search method, dynamically filtering the displayed records in the “Ship City” column based on the input.

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

@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 the Angular Data Grid can be positioned in specific locations by modifying the default placement. This enables precise control of each custom toolbar item’s positioning according to specific requirements and desired layout within the grid.

By default, custom toolbar items in the Grid component are aligned on the left side of the toolbar. The position of custom toolbar items can be modified by utilizing the align property of the ItemModel.

In the following sample, the “Collapse All” toolbar item is positioned on the Right, the “Expand All” toolbar item is positioned on the left, and the Search toolbar item is positioned at the Center.

app.component.ts
main.ts
import { employeeData } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, GridModule, GroupService, GroupSettingsModel, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';

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

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

How can I help you?

How can I help you?

Toolbar items in Angular Grid Component

Built-in toolbar items

Show only icons in built-in toolbar items

Customize built-in toolbar items

Custom toolbar items

Both built-in and custom items in toolbar

Add custom components to the Grid toolbar using template

Custom toolbar items in a specific position