Modules in Angular TreeGrid Component
Syncfusion Angular TreeGrid modules help optimize your application’s bundle size by including only the features you need. To enable a specific TreeGrid feature, import and inject the corresponding Feature Module into your TreeGrid configuration. The available TreeGrid Feature Modules include:
| Feature | Module | Description |
|---|---|---|
| Paging | PageService |
Inject this module to use paging feature. |
| Sorting | SortService |
Inject this module to use sorting feature. |
| Filtering | FilterService |
Inject this module to use filtering feature. |
| Editing | EditService |
Inject this module to use editing feature. |
| Aggregates | AggregateService |
Inject this module to use aggregate feature. |
| Column Chooser | ColumnChooserService |
Inject this module to use column chooser feature. |
| Column Menu | ColumnMenuService |
Inject this module to use column menu feature. |
| Command Column | CommandColumnService |
Inject this module to use command column feature. |
| Context Menu | ContextMenuService |
Inject this module to use context menu feature. |
| Detail Row | DetailRowService |
Inject this module to use detail template feature. |
| Foreign Key | ForeignKeyService |
Inject this module to use foreign key feature. |
| Resize | ResizeService |
Inject this module to use resize feature. |
| Reordering | ReorderService |
Inject this module to use reorder feature. |
| Row Drag and Drop | RowDDService |
Inject this module to use row drag and drop feature. |
| Virtual Scrolling | VirtualScrollService |
Inject this module to use virtual scrolling feature. |
| Infinite Scrolling | InfiniteScrollService |
Inject this module to use infinite scrolling feature. |
| Toolbar | ToolbarService |
Inject this module to use toolbar feature. |
| Excel Export | ExcelExportService |
Inject this module to use excel export feature. |
| PDF Export | PdfExportService |
Inject this module to use PDF export feature. |
Enabling basic features
The following example demonstrates how to enable basic features such as Paging, Sorting, Filtering, Toolbar and Editing by importing required modules from @syncfusion/ej2-angular-treegrid and injecting them into the treegrid component.
// Import the required treegrid modules from the treegrid package.
import { TreeGridModule, PageService, SortService, FilterService, EditService, ToolbarService, PageSettingsModel, FilterSettingsModel, EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit } from '@angular/core';
// Import TreeGrid data from external file.
import { data } from './datasource';
@Component({
imports: [TreeGridModule ],
// Inject required TreeGrid features
providers: [PageService, SortService, FilterService, EditService, ToolbarService],
standalone: true,
selector: 'app-root',
template: `
<ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' childMapping='subtasks' [allowFiltering]='true' [filterSettings]='filterSettings'
[allowSorting]='true' [allowPaging]='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'>
<e-columns>
<e-column field='TaskID' headerText='Task ID' textAlign='Right' [isPrimaryKey]='true' [validationRules]='taskIDRules' width=70></e-column>
<e-column field='TaskName' headerText='Task Name' [validationRules]='taskNameRules' textAlign='Left' width=120></e-column>
<e-column field='StartDate' headerText='Start Date' textAlign='Right' format='yMd' editType='datepickeredit' width=90></e-column>
<e-column field='EndDate' headerText='End Date' textAlign='Right' format='yMd' editType='datepickeredit' width=90></e-column>
<e-column field='Duration' headerText='Duration' editType='numericedit' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>
`
})
export class AppComponent implements OnInit {
public data?: object[];
public pageSettings?: PageSettingsModel;
public filterSettings?: FilterSettingsModel;
public editSettings?: EditSettingsModel;
public toolbar?: ToolbarItems[];
public taskIDRules?: object;
public taskNameRules?: object;
ngOnInit(): void {
this.data = data;
this.pageSettings = { pageSize: 6 };
this.filterSettings = { type: 'CheckBox' }
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
this.taskIDRules = { required: true, number: true };
this.taskNameRules = { required: true };
}
}export let data: object[] = [
{
TaskID: 1, TaskName: 'Planning', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4,
subtasks: [
{ TaskID: 2, TaskName: 'Plan timeline', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4 },
{ TaskID: 3, TaskName: 'Plan budget', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4 },
{ TaskID: 4, TaskName: 'Allocate resources', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4 },
{ TaskID: 5, TaskName: 'Planning complete', StartDate: new Date('02/07/2025'), EndDate: new Date('02/07/2025'), Duration: 1 },
],
},
{
TaskID: 6, TaskName: 'Design', StartDate: new Date('02/10/2025'), EndDate: new Date('02/14/2025'), Duration: 5,
subtasks: [
{ TaskID: 7, TaskName: 'Software Specification', StartDate: new Date('02/10/2025'), EndDate: new Date('02/12/2025'), Duration: 3 },
{ TaskID: 8, TaskName: 'Develop prototype', StartDate: new Date('02/10/2025'), EndDate: new Date('02/12/2025'), Duration: 3 },
{ TaskID: 9, TaskName: 'Get approval from customer', StartDate: new Date('02/13/2025'), EndDate: new Date('02/14/2025'), Duration: 2 },
{ TaskID: 10, TaskName: 'Design Documentation', StartDate: new Date('02/13/2025'), EndDate: new Date('02/14/2025'), Duration: 2 },
{ TaskID: 11, TaskName: 'Design complete', StartDate: new Date('02/14/2025'), EndDate: new Date('02/14/2025'), Duration: 1 },
],
},
{
TaskID: 12, TaskName: 'Implementation Phase', StartDate: new Date('02/17/2025'), EndDate: new Date('02/28/2025'), Duration: 12,
subtasks: [
{
TaskID: 13, TaskName: 'Phase 1', StartDate: new Date('02/17/2025'), EndDate: new Date('02/27/2025'), Duration: 11,
subtasks: [
{
TaskID: 14, TaskName: 'Implementation Module 1',
StartDate: new Date('02/17/2025'), EndDate: new Date('02/27/2025'), Duration: 11,
subtasks: [
{ TaskID: 15, TaskName: 'Development Task 1', StartDate: new Date('02/17/2025'), EndDate: new Date('02/19/2025'), Duration: 3 },
{ TaskID: 16, TaskName: 'Development Task 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/19/2025'), Duration: 3 },
{ TaskID: 17, TaskName: 'Testing', StartDate: new Date('02/20/2025'), EndDate: new Date('02/21/2025'), Duration: 2 },
{ TaskID: 18, TaskName: 'Bug fix', StartDate: new Date('02/24/2025'), EndDate: new Date('02/25/2025'), Duration: 2 },
{ TaskID: 19, TaskName: 'Customer review meeting', StartDate: new Date('02/26/2025'), EndDate: new Date('02/27/2025'), Duration: 2 },
{ TaskID: 20, TaskName: 'Phase 1 complete', StartDate: new Date('02/27/2025'), EndDate: new Date('02/27/2025'), Duration: 1 },
],
},
],
},
{
TaskID: 21, TaskName: 'Phase 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/28/2025'), Duration: 12,
subtasks: [
{
TaskID: 22, TaskName: 'Implementation Module 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/28/2025'), Duration: 12,
subtasks: [
{ TaskID: 23, TaskName: 'Development Task 1', StartDate: new Date('02/17/2025'), EndDate: new Date('02/20/2025'), Duration: 4 },
{ TaskID: 24, TaskName: 'Development Task 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/20/2025'), Duration: 4 },
{ TaskID: 25, TaskName: 'Testing', StartDate: new Date('02/21/2025'), EndDate: new Date('02/24/2025'), Duration: 2 },
{ TaskID: 26, TaskName: 'Bug fix', StartDate: new Date('02/25/2025'), EndDate: new Date('02/26/2025'), Duration: 2 },
{ TaskID: 27, TaskName: 'Customer review meeting', StartDate: new Date('02/27/2025'), EndDate: new Date('02/28/2025'), Duration: 2 },
{ TaskID: 28, TaskName: 'Phase 2 complete', StartDate: new Date('02/28/2025'), EndDate: new Date('02/28/2025'), Duration: 1 },
],
},
],
},
{
TaskID: 29, TaskName: 'Phase 3', StartDate: new Date('02/17/2025'), EndDate: new Date('02/27/2025'), Duration: 11,
subtasks: [
{
TaskID: 30, TaskName: 'Implementation Module 3',
StartDate: new Date('02/17/2025'), EndDate: new Date('02/27/2025'), Duration: 11,
subtasks: [
{ TaskID: 31, TaskName: 'Development Task 1', StartDate: new Date('02/17/2025'), EndDate: new Date('02/19/2025'), Duration: 3 },
{ TaskID: 32, TaskName: 'Development Task 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/19/2025'), Duration: 3 },
{ TaskID: 33, TaskName: 'Testing', StartDate: new Date('02/20/2025'), EndDate: new Date('02/21/2025'), Duration: 2 },
{ TaskID: 34, TaskName: 'Bug fix', StartDate: new Date('02/24/2025'), EndDate: new Date('02/25/2025'), Duration: 2 },
{ TaskID: 35, TaskName: 'Customer review meeting', StartDate: new Date('02/26/2025'), EndDate: new Date('02/27/2025'), Duration: 2 },
{ TaskID: 36, TaskName: 'Phase 3 complete', StartDate: new Date('02/27/2025'), EndDate: new Date('02/27/2025'), Duration: 1 },
],
},
],
},
],
},
];import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));