Toolbar.md

layout	post
title	Toolbar in Angular Grid Control | Syncfusion
description	Learn here all about toolbar support in Syncfusion Essential Angular Grid control, it's elements, and more.
platform	angular
control	Grid
documentation	ug
api	/api/angular/ejgrid

Toolbar in Angular Grid

Toolbar can be shown by defining toolbarSettings.showToolbar should be true. Toolbar has option to add default items in toolbarSettings.toolbarItems and customized items in toolbarSettings.customToolbarItems.

Default Toolbar items

The following table shows default toolbar items and its action.

Default toolbar items	Action
Add	Add a new row
Edit	Edit an existing
Delete	Delete a row
Update	Update edited or added row
Cancel	Cancel edited or added row
Search	Search text in records

{% highlight html %} <ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings" [allowPaging]=true> <e-column field="OrderID" [isPrimaryKey]="true" headerText="Order ID" width="90" textAlign="right"> {% endhighlight %} {% highlight ts %}

import {Component, ViewEncapsulation} from '@angular/core';
@Component({
  selector: 'ej-app',
  templateUrl: 'app/app.component.html',  //give the path file for Grid control html file.
})
export class AppComponent {
    public gridData;
    public right;
	constructor()
    {
        //The datasource "(window as any).gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
        this.gridData = (window as any).gridData;
        this.editSettings={allowAdding: true, allowEditing: true, allowDeleting: true };
        this.toolbarSettings={ showToolbar: true,toolbarItems: ["add","edit","delete","update","cancel"]};
    }
 }

{% endhighlight %}

I> editSettings.allowAdding, editSettings.allowEditing and editSettings.allowDeleting need to be enabled for add, delete, edit, save & cancel in toolbarItems. allowSearching` to be enabled while adding Search in toolbar to perform search action.

Custom Toolbar items

Custom toolbar is used to create your own toolbar items in toolbar. It can add by defining toolbarSettings.customToolbarItems. Actions for this customized toolbar is defined in toolbarClick event.

{% highlight html %} <ej-grid id="Grid" #grid [dataSource]="gridData" [toolbarSettings]="toolbarSettings" [allowPaging]=true [allowGrouping]=true (toolbarClick)="toolbar($event)" [groupSettings] = "groupSettings"> <e-column field="OrderID" [isPrimaryKey]="true" headerText="Order ID" width="90" textAlign="right">

<style type="text/css" class="cssStyles"> .refresh:before { content: "\e677"; } .Collapse:before { content: "\e625"; } </style>

{% endhighlight %} {% highlight ts %}

import {Component, ViewEncapsulation, ViewChild } from '@angular/core';
@Component({
  selector: 'ej-app',
  templateUrl: 'app/app.component.html',  //give the path file for Grid control html file.
})
export class AppComponent {
    public gridData;
    public right;
    @ViewChild("grid") gridIns: EJComponents<any, any>;  
	constructor()
    {
        //The datasource "(window as any).gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
        this.gridData = (window as any).gridData;
        this.groupSettings = {groupedColumns: ["ShipCity"]},
        this.toolbarSettings={showToolbar:true,customToolbarItems:["Collapse", {templateID: "<a  class='e-toolbaricons e-icon refresh' />"}]};
    }
    toolbar(e:any){
        var toolbarObject = $(e.target),
        grid = this.gridIns.widget;
        if (toolbarObject.hasClass("Collapse")) grid.collapseAll(); //collapse Grid using grid instance, `this` is grid instance
        else grid.refreshContent(); //refresh content using grid instance
    }
 }

{% endhighlight %}