- Enable or disable toolbar items
- Add toolbar at the bottom of tree grid
- See also
Contact Support
Tool bar in Angular Treegrid component
5 Apr 20258 minutes to read
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.
Enable or disable toolbar items
Enable or disable toolbar items by using the enableItems
method.
You can also use the enableToolbarItems
method to enable or disable the tool bar items. In this method, you need to pass the toolbar items and isEnable as parameters.
import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService,EditService,ToolbarService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { ToolbarItems, TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
@Component({
imports: [
TreeGridModule,
ButtonModule,
DropDownListAllModule,
],
providers: [PageService,
SortService,
FilterService,
EditService,
ToolbarService],
standalone: true,
selector: 'app-container',
template: `
<button ejs-button (click)='enableClick()'>Enable</button>
<button ejs-button (click)='disableClick()'>Disable</button>
<ejs-treegrid [dataSource]='data' #treegrid height='220' [allowFiltering]='true' (toolbarClick)='toolbarClick($event)' [allowPaging]='true' pageSettings='pager'[treeColumnIndex]='1' childMapping='subtasks' [toolbar]='toolbarOptions'>
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=120></e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=110></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data?: Object[];
public toolbarOptions?: ToolbarItems[] | any;
public pager?: Object;
@ViewChild('treegrid')
public treeGridObj?: TreeGridComponent;
ngOnInit(): void {
this.data = sampleData;
this.toolbarOptions = ['QuickFilter', 'ClearFilter'];
this.pager = { pageSize: 8 }
}
toolbarClick(args: Object | any): void{
if (args.item.text === 'QuickFilter') {
this.treeGridObj?.filterByColumn('taskName', 'startswith', 'Testing');
}
if (args.item.text === 'ClearFilter') {
this.treeGridObj?.clearFiltering();
}
}
enableClick() {
this.treeGridObj?.toolbarModule.enableItems([this.treeGridObj?.element.id + '_gridcontrol_QuickFilter', this.treeGridObj.element.id + '_gridcontrol_ClearFilter'], true);// enable toolbar items.
};
disableClick() {
this.treeGridObj?.toolbarModule.enableItems([this.treeGridObj?.element.id + '_gridcontrol_QuickFilter', this.treeGridObj.element.id + '_gridcontrol_ClearFilter'], false);// disable toolbar items.
};
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Add toolbar at the bottom of tree grid
Add the toolbar component at the bottom of the tree grid using the created event.
import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService,EditService,ToolbarService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
@Component({
imports: [
TreeGridModule,
ButtonModule,
DropDownListAllModule,
],
providers: [PageService,
SortService,
FilterService,
EditService,
ToolbarService],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid [dataSource]='data' id='TreeGrid' #treegrid height='220' [treeColumnIndex]='1' childMapping='subtasks' [toolbar]='toolbarOptions' (created)="created($event)">
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=120></e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=110></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data?: object[];
public toolbarOptions?: string[];
@ViewChild('treegrid')
public treegrid?: TreeGridComponent;
ngOnInit(): void {
this.data = sampleData.slice(0, 2);
this.toolbarOptions = ['Print', 'Search'];
}
created(args: any) {
let toolbarOptions: HTMLElement = (this.treegrid as TreeGridComponent).element.querySelector('.e-toolbar') as HTMLElement;
(this.treegrid as TreeGridComponent).element.appendChild(toolbarOptions);
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
See also
Refer to Syncfusion®
Angular Tree Grid
feature tour page for its groundbreaking feature representations. Also, explore Syncfusion®Angular Tree Grid example
to know how to present and manipulate data.