How to get started easily with Angular 8 TreeGrid?

4 mins read

The Essential JS 2 Angular TreeGrid is used to visualize self-referential hierarchical data effectively in a tabular format. It expands or collapses child data using the tree column. Its feature set includes functionalities like data binding with adaptors, editing, filtering, sorting, paging, aggregating rows, and exporting to Excel, CSV, and PDF formats. In this knowledge base, we are going to provide details about how to easily integrate Syncfusion Angular TreeGrid in Angular 8 application and how to enable its commonly used features using services.

Prerequisites

Before start, we need following items to create Angular TreeGrid in Angular 8 application

Node.js (latest version)
Angular 8
Angular CLI
Visual studio code for editor.

Installation and application creation

Install Angular cli 8using following command.

      npm install -g @angular/cli@8.1.1

Angular CLI application Installation by using Command prompt

Create an Angular 8 application using Angular cli.
```
ng new angular8-app
cd angular8-app
```

Serve the Angular 8 application using following command
```
ng serve
```

Listen the application in localhost:4200. Your application will serve in browser as follows.

Angular 8 Application

Integration of Angular TreeGrid

After running the Angular 8 application successfully, configure the Angular TreeGrid in this application. Install Angular TreeGrid and EJ2 package using following command. The —save command will instruct the NPM to include a treegrid package inside the dependencies section of the package.json.
```
npm install @syncfusion/ej2-angular-treegrid --save 
npm install @syncfusion/ej2 --save 
```

Import TreeGridModule from installed package in app/app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid';
import { AppComponent } from './app.component';
 
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TreeGridModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

You should refer the CSS file for Angular TreeGrid in style.CSS
```
@import "../node_modules/@syncfusion/ej2/material.css";
```

Add the Angular TreeGrid component in app.component.html.
```
<ejs-treegrid></ejs-treegrid>
```

Now, define the row data for this TreeGrid in app.component.ts. Here, the JSON data is used for the TreeGrid.

export class AppComponent implements OnInit {
        public data: Object[];
        ngOnInit() {
            this.data = [{
                    taskID: 1,
                    taskName: 'Planning',
                    startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'),
                    progress: 100,
                    duration: 5,
                    priority: 'Normal',
                    approved: false,
                    subtasks: [
                        { taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'),
                            endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false },
                        { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'),
                            endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Low', approved: true },
                        { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'),
                            endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false },
                        { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'),
                            endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true }
                    ]
                },
            ];
        }
    }

After defining row data, define TreeGrid’s dataSource, columns, treeColumnIndex, childMapping in app.component.html. In Columns, the textAlign is defined to customize the alignment of columns, Width is to defined the column width in pixels and format is defined to customize the cell value to Number and Date options by I18n standard.

  <ejs-treegrid [dataSource]='data' childMapping='subtasks' [treeColumnIndex]='1'>
        <e-columns>
            <e-column field='taskID' headerText='Task ID' width='70' textAlign='Right'></e-column>
            <e-column field='taskName' headerText='Task Name' width='200'></e-column>
            <e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
            <e-column field='endDate' headerText='End Date' width='90' format="yMd" textAlign='Right'></e-column>
            <e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
            <e-column field='progress' headerText='Progress' width='80' textAlign='Right'></e-column>
            <e-column field='priority' headerText='Priority' width='90'></e-column>
        </e-columns>
    </ejs-treegrid>

Now serve the application using following command.
```
 ng serve --open
```

Once all the files are compiled successfully. It will serve the site at localhost:4200. The following screenshot illustrates this.

TreeGrid Output

Enabling Features

So far, we have learned, how to add TreeGrid in Angular 8 Application. This section describes how to inject treegrid services and enable its features. Before enable treegrid features, we need to define their services in app.module.ts.

import { PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GridModule
  ],
  providers: [PageService, SortService, FilterService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Paging

After defining the PageService in providers. Now we can access Paging functionality from TreeGrid. To enable pager in TreeGrid, set the allowPaging property to true.

<ejs-treegrid [dataSource]='data' [allowPaging]='true' childMapping='subtasks' [treeColumnIndex]='1'>
  <e-columns>
      <e-column field='taskID' headerText='Task ID' width='70' textAlign='Right'></e-column>
      <e-column field='taskName' headerText='Task Name' width='190'></e-column>
      <e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
      <e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
      <e-column field='progress' headerText='Progress' width='80' textAlign='Right'></e-column>
      <e-column field='priority' headerText='Priority' width='90'></e-column>
  </e-columns>
</ejs-treegrid>

TreeGrid with Paging

Sorting

After SortService is defined in providers. You can inherit sorting behaviors. This can be used in TreeGrid by setting allowSorting property as true.

<ejs-treegrid [dataSource]='data' [allowPaging]='true' [allowSorting]='true' childMapping='subtasks' [treeColumnIndex]='1'>
  <e-columns>
      <e-column field='taskID' headerText='Task ID' width='70' textAlign='Right'></e-column>
      <e-column field='taskName' headerText='Task Name' width='190'></e-column>
      <e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
      <e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
      <e-column field='progress' headerText='Progress' width='80' textAlign='Right'></e-column>
      <e-column field='priority' headerText='Priority' width='90'></e-column>
  </e-columns>
</ejs-treegrid>

TreeGrid with sorting

Filtering

By declaring FilterService in app.module.ts. You can use filtering functionalities in TreeGrid. In this Angular 8 TreeGrid, enable Filter menu to filter treegrid records. To enable Filter menu, we need to define allowFiltering as true and have to define filterSettings.type as Menu.

<ejs-grid [dataSource]='data' [allowPaging]='true' [allowSorting]='true' [allowFiltering]='true' [filterSettings]='filterSettings'>
    <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width='120'></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width='120'></e-column>
        <e-column field='Freight' textAlign='Right' format='c2' width='120'></e-column>
        <e-column field='ShipCountry' headerText='Ship Country' width='140'></e-column>
    </e-columns>
</ejs-grid>

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  public data: Object[];
  public filterSettings: Object;
  ngOnInit() {
    this.filterSettings = { type: 'Menu' };
    this.data = [{
                    taskID: 1,
                    taskName: 'Planning',
                    startDate: new Date('02/03/2017'),
                    endDate: new Date('02/07/2017'),
                    progress: 100,
                    duration: 5,
                    priority: 'Normal',
                    approved: false,
                    subtasks: [
                        { taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'),
                            endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false },
                        { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'),
                            endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Low', approved: true },
                        { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'),
                            endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false },
                        { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'),
                            endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true }
                    ]
                },
            ];
  }
}

After defining filter menu. Filter UI will be obtained as follows.

TreeGrid with filtering

Summary

Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!

Conclusion

I hope you enjoyed learning about how to get started easily with Angular 8 TreeGrid.

You can refer to our Angular TreeGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular TreeGrid example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)