The TreeGrid provides ToolBar support to handle treegrid 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 the treegrid.
Built-in toolbar items execute standard actions of the treegrid, 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 actions.
Built-in Toolbar Items | Actions |
---|---|
ExpandAll | Expands all the rows. |
CollapseAll | Collapses all the rows. |
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. |
Prints the treegrid. | |
ExcelExport | Exports the treegrid to Excel. |
PdfExport | Exports the treegrid to PDF. |
WordExport | Exports the treegrid to Word. |
import { TreeGrid, Toolbar, Filter } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
TreeGrid.Inject(Toolbar, Filter);
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
toolbar: ['Print', 'Search'],
height: 265,
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180, textAlign: 'Left' },
{
field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd'
},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='TreeGrid'></div>
</div>
</body>
</html>
- The
toolbar
has options to define both built-in and 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 Quick Filter
toolbar item.
import { TreeGrid, Toolbar, Filter } from '@syncfusion/ej2-treegrid';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { sampleData } from './datasource.ts';
TreeGrid.Inject(Toolbar, Filter);
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
toolbar: [{text: 'Quick Filter', tooltipText: 'Quick Filter', id: 'toolbarfilter', align:'Right'}],
toolbarClick: (args: ClickEventArgs) => {
if (args.item.id === 'toolbarfilter') {
treeGridObj.filterByColumn('taskName', 'startswith', 'Testing');
}
},
allowFiltering: true,
height: 220,
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180, textAlign: 'Left' },
{
field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd'
},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');
- The
toolbar
has options to define both built-in and custom toolbar items.- If a toolbar item does not match the built-in items, it will be treated as a custom toolbar item.
TreeGrid have an option to use both built-in and custom toolbar items at same time.
In the below example, ExpandAll
, CollapseAll
are built-in toolbar items and Click
is custom toolbar item.
import { TreeGrid, Edit, Toolbar } from '@syncfusion/ej2-treegrid';
import { EmitType } from '@syncfusion/ej2-base';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { sampleData } from './datasource.ts';
TreeGrid.Inject(Edit, Toolbar);
let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => {
if (args.item.text === 'Click') {
alert("Custom toolbar click...");
}
};
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
toolbar: ['ExpandAll', 'CollapseAll', { text: 'Click', tooltipText: 'Click', prefixIcon: 'e-time', id: 'Click' }],
toolbarClick: clickHandler,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
height: 270,
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180, textAlign: 'Left' },
{
field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd'
},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-treegrid .e-time::before {
content: '\e20c'
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='TreeGrid'></div>
</div>
</body>
</html>
You can enable/disable toolbar items by using the enableItems
method.
import { TreeGrid, Toolbar, Filter } from '@syncfusion/ej2-treegrid';
import { Button } from '@syncfusion/ej2-buttons';
import { sampleData } from './datasource.ts';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
TreeGrid.Inject(Toolbar, Filter);
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
allowFiltering: true,
toolbar: ['QuickFilter', 'ClearFilter'],
toolbarClick: clickHandler,
height: 200,
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180, textAlign: 'Left' },
{
field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd'
},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');
let enable: Button = new Button({}, '#enable');
let disable: Button = new Button({}, '#disable');
enable.element.onclick = () => {
treeGridObj.toolbarModule.enableItems([treeGridObj.element.id + '_gridcontrol_QuickFilter', treeGridObj.element.id + '_gridcontrol_ClearFilter'], true);// enable toolbar items.
};
disable.element.onclick = () => {
treeGridObj.toolbarModule.enableItems([treeGridObj.element.id + '_gridcontrol_QuickFilter', treeGridObj.element.id + '_gridcontrol_ClearFilter'], false);// disable toolbar items.
};
function clickHandler(args: ClickEventArgs): void {
if (args.item.text === 'QuickFilter') {
treeGridObj.filterByColumn('taskName', 'startswith', 'Testing');
}
if (args.item.text === 'ClearFilter') {
treeGridObj.clearFiltering();
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<button id='enable' class="e-flat">Enable</button>
<button id='disable' class="e-flat">Disable</button>
<div id='TreeGrid'></div>
</div>
</body>
</html>