Tool bar in Angular TreeGrid component

The TreeGrid provides toolbar support to handle various actions. The toolbar property accepts a collection of built-in toolbar items, ItemModel objects for custom items, or the HTML element ID for a toolbar template.

To use the toolbar, inject the Toolbar module in the TreeGrid.

Enable or disable toolbar items

Use the enableItems method to enable or disable toolbar items.

Alternatively, you can use the enableToolbarItems method to enable or disable toolbar items. Pass the toolbar item names and the isEnable (boolean) parameter to control item state.

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 the TreeGrid

You can add a toolbar to the bottom of the TreeGrid by configuring it within 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.