Search results

Toolbar

The Grid provides ToolBar support to handle grid actions. The toolbar property accepts either the collection of built-in toolbar items and ItemModel objects for custom toolbar items or HTML element ID for toolbar template.

To use Toolbar, inject Toolbar module in Grid.

Built-in Toolbar Items

Built-in toolbar items execute standard actions of the grid, and it can be added by defining the toolbar as a collection of built-in items. It renders the button with icon and text.

The following table shows Built-in toolbar items and its action.

Built-in Toolbar Items Actions
Add Adds a new record.
Edit Edits the selected record.
Update Updates the edited record.
Delete Deletes the selected record.
Cancel Cancels the edit state.
Search Searches the records by the given key.
Print Prints the grid.
ExcelExport Exports the grid to Excel.
PdfExport Exports the grid to PDF.
WordExport Exports the grid to Word.
Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    public toolbarOptions: ToolbarItems[] = ['Search', "Print"];
    render() {
        return <GridComponent dataSource={data} toolbar={this.toolbarOptions} height={270}>
            <ColumnsDirective>
                <ColumnDirective field='OrderID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='CustomerID' width='100'></ColumnDirective>
                <ColumnDirective field='EmployeeID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"></ColumnDirective>
                <ColumnDirective field='ShipCountry' width='100'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[ Toolbar ]} />
        </GridComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('grid'));
  • The toolbar has options to define both built-in and custom toolbar items.

Custom Toolbar Items

Custom toolbar items can be added by defining the toolbar as a collection of ItemModels. Actions for this customized toolbar items are defined in the toolbarClick event.

By default, Custom toolbar items are in position Left. You can change the position by using the align property. In the below sample, we have applied position Right for the Collapse All toolbar item.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Toolbar, Group,
GroupSettingsModel, ToolbarItems } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    public gridInstance: any;
    public toolbarOptions: ToolbarItems[] = [{ text: 'Expand All', tooltipText: 'Expand All', prefixIcon: 'e-expand', id: 'expandall' },{ text: 'Collapse All', tooltipText: 'collection All', prefixIcon: 'e-collapse', id: 'collapseall', align:'Right' }];
    public groupOptions: GroupSettingsModel = {columns: ['CustomerID']};
    clickHandler(args: any) {
       if (args.item.id === 'expandall') {
        this.gridInstance.groupModule.expandAll();
      }
       if(args.item.id === "collapseall"){
        this.gridInstance.groupModule.collapseAll();
      }
    }
    render() {
        return <GridComponent dataSource={data} allowGrouping={true} groupSettings ={this.groupOptions} toolbar={this.toolbarOptions} toolbarClick={this.clickHandler.bind(this)} ref={g => this.gridInstance = g} height={240}>
            <ColumnsDirective>
                <ColumnDirective field='OrderID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='CustomerID' width='100'></ColumnDirective>
                <ColumnDirective field='EmployeeID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"></ColumnDirective>
                <ColumnDirective field='ShipCountry' width='100'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[ Toolbar, Group ]} />
        </GridComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('grid'));
  • The toolbar has options to define both built-in and custom toolbar items.
  • If a toolbar item does not match with built-in items, it will be treated as custom toolbar item.

Built-in and custom items in toolbar

Grid have an option to use both built-in and custom toolbar items at same time.

In the below example, Add, Edit, Delete, Update, Cancel are built-in toolbar items and Click is custom toolbar item.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    public gridInstance: any;
    public toolbarOptions: ToolbarItems[] = [{ text: 'Click', tooltipText: 'Click', prefixIcon: 'e-click', id: 'Click' }];
    clickHandler(args: any) {
       if (args.item.id === 'Click') {
        alert("Custom toolbar Click...");
      }
    }
    render() {
        return <GridComponent dataSource={data} toolbar={this.toolbarOptions} toolbarClick={this.clickHandler.bind(this)} ref={g => this.gridInstance = g} height={240}>
            <ColumnsDirective>
                <ColumnDirective field='OrderID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='CustomerID' width='100'></ColumnDirective>
                <ColumnDirective field='EmployeeID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"></ColumnDirective>
                <ColumnDirective field='ShipCountry' width='100'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[ Toolbar ]} />
        </GridComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('grid'));

Enable/Disable Toolbar Items

You can enable/disable toolbar items by using the enableItems method.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Toolbar, Group,
GroupSettingsModel, ToolbarItems } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    public grid: any;
    public toolbarOptions: ToolbarItems[] = ['Expand', 'Collapse'];
    public groupOptions: GroupSettingsModel = {columns: ['CustomerID']};
    clickHandler(args: any) {
       if (args.item.id === 'Grid_Expand') { // Grid_Collapse is component id + '_' + toolbar item name.
        this.grid.groupModule.expandAll();
      }
       if(args.item.id === "Grid_Collapse"){
        this.grid.groupModule.collapseAll();
      }
    }
    enable() {
        this.grid.toolbarModule.enableItems(['Grid_Collapse','Grid_Expand'],true);//Enable toolbar items.
    }

    disable() {
        this.grid.toolbarModule.enableItems(['Grid_Collapse','Grid_Expand'],false);//Disable toolbar items.
    }
    render() {
        return (<div>
            <ButtonComponent className='e-flat' onClick= { this.enable.bind(this)}>Enable</ButtonComponent>
            <ButtonComponent className='e-flat' onClick= { this.disable.bind(this)}>Disable</ButtonComponent>
            <GridComponent id='Grid' dataSource={data} allowGrouping={true} groupSettings ={this.groupOptions} toolbar={this.toolbarOptions} toolbarClick={this.clickHandler.bind(this)} ref={g => this.grid = g} height={220}>
            <ColumnsDirective>
                <ColumnDirective field='OrderID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='CustomerID' width='100'></ColumnDirective>
                <ColumnDirective field='EmployeeID' width='100' textAlign="Right"></ColumnDirective>
                <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"></ColumnDirective>
                <ColumnDirective field='ShipCountry' width='100'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[ Toolbar, Group ]} />
        </GridComponent>
        </div>)
    }
};
ReactDOM.render(<App />, document.getElementById('grid'));

See Also