Tool bar items in React TreeGrid

11 Oct 202524 minutes to read

Built-in toolbar items execute standard TreeGrid actions and can be added by defining the toolbar property as a collection of built-in items. Each item renders as a button with an icon and text.

The following table lists built-in toolbar items and their actions.

Built-in Toolbar Items	Actions
ExpandAll	Expands all rows.
CollapseAll	Collapses all rows.
Add	Adds a new record.
Edit	Edits the selected record.
Update	Saves the current edit.
Delete	Deletes the selected record.
Cancel	Cancels the edit state.
Search	Searches records by a given key.
Print	Prints the TreeGrid.
ColumnChooser	Opens a dialog to manage column visibility.
ExcelExport	Exports the TreeGrid to Excel.
PdfExport	Exports the TreeGrid to PDF.
WordExport	Exports the TreeGrid to Word.
Indent	Indents the record one hierarchy level.
Outdent	Outdents the record one hierarchy level.

app.jsx
app.tsx
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sampleData } from './datasource';
function App() {
    const toolbarOptions = ['Print', 'Search'];
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='265' toolbar={toolbarOptions}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Toolbar, Filter]}/>
    </TreeGridComponent>;
}
;
export default App;
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sampleData } from './datasource';

function App() {
    const toolbarOptions: ToolbarItems[] = ['Print', 'Search'];

    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
        height='265' toolbar={toolbarOptions}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Toolbar,Filter]}/>
    </TreeGridComponent>
};
export default App;

The toolbar supports both built-in and custom toolbar items.

Custom toolbar items can be added by defining the toolbar property as a collection of ItemModels. Actions for custom items are handled in the toolbarClick event.

By default, custom items are aligned to the Left. The position can be changed using the align property. In the sample below, the position is set to Right for the Quick Filter toolbar item.

app.jsx
app.tsx
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sampleData } from './datasource';
function App() {
    let treegrid;
    const toolbarOptions = [
        { text: 'Quick Filter', tooltipText: 'Quick Filter', id: 'toolbarfilter', align: 'Right' }
    ];
    const toolbarClick = (args) => {
        if (treegrid && args.item.text === 'Quick Filter') {
            treegrid.filterByColumn("taskName", "startswith", "Testing");
        }
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowFiltering={true} height='220' toolbar={toolbarOptions} toolbarClick={toolbarClick} ref={g => treegrid = g}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='160'/>
            <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Toolbar, Filter]}/>
    </TreeGridComponent>;
}
;
export default App;
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Toolbar, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sampleData } from './datasource';

function App() {
    let treegrid: TreeGridComponent | null;

    const toolbarOptions: object[] = [
        { text: 'Quick Filter', tooltipText: 'Quick Filter', id: 'toolbarfilter', align:'Right' }
    ];

    const toolbarClick = (args: ClickEventArgs): void => {
        if (treegrid && args.item.text === 'Quick Filter') {
            treegrid.filterByColumn("taskName","startswith","Testing");
        }
    }

    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
        allowFiltering={true} height='220' toolbar={toolbarOptions} toolbarClick={toolbarClick}
        ref={g => treegrid = g}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='160'/>
            <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Toolbar,Filter]}/>
    </TreeGridComponent>
};
export default App;

The toolbar supports both built-in and custom items.

Any item that does not match a built-in name is treated as a custom toolbar item.

TreeGrid supports using built-in and custom toolbar items together.
In the example below, ExpandAll and CollapseAll are built-in items, and Click is a custom item.

app.jsx
app.tsx
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sampleData } from './datasource';
function App() {
    let treegrid;
    const toolbarOptions = [
        'ExpandAll', 'CollapseAll',
        { text: 'Click', tooltipText: 'Click', id: 'Click', prefixIcon: 'e-time' }
    ];
    const toolbarClick = (args) => {
        if (treegrid && args.item.text === 'Click') {
            alert("Custom toolbar click...");
        }
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' ref={g => treegrid = g} toolbar={toolbarOptions} toolbarClick={toolbarClick}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='160'/>
            <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Toolbar]}/>
    </TreeGridComponent>;
}
;
export default App;
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, Toolbar, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sampleData } from './datasource';

function App() {
    let treegrid: TreeGridComponent | null;

    const toolbarOptions: any[] = [
        'ExpandAll', 'CollapseAll',
        { text: 'Click', tooltipText: 'Click', id: 'Click', prefixIcon:'e-time' }];

        const toolbarClick = (args: ClickEventArgs): void => {
        if (treegrid && args.item.text === 'Click') {
            alert("Custom toolbar click...");
        }
    }

    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
        ref={g => treegrid = g} toolbar={toolbarOptions} toolbarClick={toolbarClick}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='160'/>
            <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Toolbar]}/>
    </TreeGridComponent>
};
export default App;

Enable or disable toolbar items programmatically using the enableItems method.

app.jsx
app.tsx
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sampleData } from './datasource';
function App() {
    let treegrid;
    const toolbarOptions = ['QuickFilter', 'ClearFilter'];
    const enable = () => {
        if (treegrid) {
            // Enable toolbar items.
            treegrid.toolbarModule
                .enableItems([treegrid.element.id + '_gridcontrol_QuickFilter', treegrid.element.id + '_gridcontrol_ClearFilter'], true);
        }
    };
    const disable = () => {
        if (treegrid) {
            // Disable toolbar items.
            treegrid.toolbarModule
                .enableItems([treegrid.element.id + '_gridcontrol_QuickFilter', treegrid.element.id + '_gridcontrol_ClearFilter'], false);
        }
    };
    const toolbarClick = (args) => {
        if (treegrid) {
            if (args.item.text === 'QuickFilter') {
                treegrid.filterByColumn('taskName', 'startswith', 'Testing');
            }
            if (args.item.text === 'ClearFilter') {
                treegrid.clearFiltering();
            }
        }
    };
    return (<div><ButtonComponent className='e-flat' onClick={enable}>Enable</ButtonComponent>
    <ButtonComponent className='e-flat' onClick={disable}>Disable</ButtonComponent>
    <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='200' ref={g => treegrid = g} toolbar={toolbarOptions} toolbarClick={toolbarClick} allowFiltering={true}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Toolbar, Filter]}/>
    </TreeGridComponent></div>);
}
;
export default App;
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Toolbar, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sampleData } from './datasource';

function App() {
    let treegrid: TreeGridComponent | null;

    const toolbarOptions: string[] = ['QuickFilter', 'ClearFilter'];

    const enable = () => {
        if (treegrid) {
            // Enable toolbar items.
            treegrid.toolbarModule
                .enableItems([treegrid.element.id + '_gridcontrol_QuickFilter', treegrid.element.id + '_gridcontrol_ClearFilter'], true);
        }
    }

    const disable = () => {
        if (treegrid) {
            // Disable toolbar items.
            treegrid.toolbarModule
                .enableItems([treegrid.element.id + '_gridcontrol_QuickFilter', treegrid.element.id + '_gridcontrol_ClearFilter'], false);
        }
    }

    const toolbarClick = (args: ClickEventArgs): void => {
        if (treegrid) {
            if (args.item.text === 'QuickFilter') {
                treegrid.filterByColumn('taskName', 'startswith', 'Testing');
            }
            if (args.item.text === 'ClearFilter') {
                treegrid.clearFiltering();
            }
        }
    }

    return (<div><ButtonComponent className='e-flat' onClick= { enable }>Enable</ButtonComponent>
    <ButtonComponent className='e-flat' onClick= { disable }>Disable</ButtonComponent>
    <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='200'
        ref={g => treegrid = g} toolbar={toolbarOptions} toolbarClick={toolbarClick} allowFiltering={true}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Toolbar,Filter]}/>
    </TreeGridComponent></div>)
};
export default App;

Search docs

Ask HelpBot

Search docs

Ask HelpBot

Tool bar items in React TreeGrid

Tool bar items in React TreeGrid

Built-in toolbar items

Custom toolbar items

Built-in and custom items in toolbar

Enable or disable toolbar items