Custom tool bar in Angular TreeGrid component

Custom toolbar items can be added to the TreeGrid by defining the toolbar property as a collection of ItemModels.
Actions for these custom toolbar items are defined in the toolbarClick event.

By default, custom toolbar items are positioned on the left. You can change the position of a toolbar item using the align property. In the sample below, the Quick Filter toolbar item is positioned on the right.

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: `<ejs-treegrid [dataSource]='data' [allowFiltering]='true' #treegrid height='220' (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 = [{text: 'Quick Filter', tooltipText: 'Quick Filter', id: 'toolbarfilter', align:'Right'}];
        this.pager = { pageSize: 8 }
    }

    toolbarClick(args: Object | any): void {
        if (args.item.id === 'toolbarfilter') {
            (this.treeGridObj as TreeGridComponent).filterByColumn('taskName', 'startswith', 'Testing');
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • The toolbar property can include both built-in and custom items.
  • If a toolbar item does not match a built-in item, it is treated as a custom toolbar item.

Built-in and custom items in toolbar

The TreeGrid allows using both built-in and custom toolbar items together.

In the example below, ExpandAll and CollapseAll are built-in toolbar items, while Click is a custom toolbar item.

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: `<ejs-treegrid [dataSource]='data' #treegrid height='220' (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 = ['ExpandAll', 'CollapseAll', { text: 'Click', tooltipText: 'Click', prefixIcon: 'e-time', id: 'Click' }];
        this.pager = { pageSize: 8 }
    }

    toolbarClick(args: Object | any): void {
        if (args.item.text === 'Click') {
            alert("Custom toolbar click...");
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));