Tool bar items in EJ2 TypeScript Treegrid control
27 Apr 202311 minutes to read
Built-in toolbar items
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. |
Indent | Indents the record to one level of hierarchy. |
Outdent | Outdents the record to one level of hierarchy. |
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="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></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.
Enable or disable toolbar items
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="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></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>