Toolbar with Grid widget for Syncfusion Essential JS

28 Nov 20176 minutes to read

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.

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

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings" [allowPaging]=true>
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true" headerText="Order ID" width="90" textAlign="right"></e-column>
        <e-column field="CustomerID" headerText= 'Customer ID' width= 90></e-column>
        <e-column field="EmployeeID" headerText='Employee ID' editType="dropdownedit" textAlign="right" width="80"></e-column>
        <e-column field="Freight" headerText= 'Freight' textAlign="right" editType= "numericedit" width="80" format= "{0:C}" ></e-column>
        <e-column field="ShipName" headerText='Ship Name' width="150"  ></e-column>
    </e-columns>
</ej-grid>

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"]};
        }
     }

IMPORTANT

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

HTML

<ej-grid id="Grid" #grid [dataSource]="gridData" [toolbarSettings]="toolbarSettings" [allowPaging]=true [allowGrouping]=true (toolbarClick)="toolbar($event)" [groupSettings] = "groupSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true" headerText="Order ID" width="90" textAlign="right"></e-column>
        <e-column field="CustomerID" headerText= 'Customer ID' width= 90></e-column>
        <e-column field="EmployeeID" headerText='Employee ID' editType="dropdownedit" textAlign="right" width="80"></e-column>
        <e-column field="Freight" headerText= 'Freight' textAlign="right" editType= "numericedit" width="80" format= "{0:C}" ></e-column>
        <e-column field="ShipName" headerText='Ship Name' width="150"  ></e-column>
    </e-columns>
</ej-grid>

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

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
        }
     }

Toolbar

Default Toolbar items

Custom Toolbar items