Toolbar

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

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

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