Custom tool bar in Angular Treegrid component
17 Nov 20228 minutes to read
Custom toolbar items can be added by defining the toolbar
as a collection of ItemModels
.
Actions for this customized toolbar items are defined in the toolbarClick
event.
By default, Custom toolbar items are in position Left
. You can change the position by using the align
property. In the below sample, we have applied position Right
for the Quick Filter
toolbar item.
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { ToolbarItems } from '@syncfusion/ej2-angular-treegrid';
@Component({
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[];
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): void {
if (args.item.id === 'toolbarfilter') {
this.treeGridObj.filterByColumn('taskName', 'startswith', 'Testing');
}
}
}
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';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
- The
toolbar
has options to define both built-in and custom toolbar items.- If a toolbar item does not match the built-in items, it will be treated as a custom toolbar item.
Built-in and custom items in toolbar
TreeGrid have an option to use both built-in and custom toolbar items at same time.
In the below example, ExpandAll
, CollapseAll
are built-in toolbar items and Click
is custom toolbar item.
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { ToolbarItems } from '@syncfusion/ej2-angular-treegrid';
@Component({
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[];
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): void {
if (args.item.text === 'Click') {
alert("Custom toolbar click...");
}
}
}
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';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);