Tool bar in Angular Treegrid component

27 Sep 20239 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 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.

app.component.ts
app.module.ts
main.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { ToolbarItems, TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

@Component({
    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 { 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 { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService,
                SortService,
                FilterService,
                EditService,
                ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Add the toolbar component at the bottom of the tree grid using the created event.

app.component.ts
app.module.ts
main.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

@Component({
    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 { 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 { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService,
                SortService,
                FilterService,
                EditService,
                ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Tool bar in Angular Treegrid component

Enable or disable toolbar items

Add toolbar at the bottom of tree grid

See also