Cell in Angular TreeGrid component

13 May 202424 minutes to read

In the Syncfusion Angular TreeGrid, a cell refers to an individual data point or a unit within a tree grid column that displays data. It represents the intersection of a row and a column, and it contains specific information associated with that row and column. Each cell can display text, numbers, or other content related to the data it represents.

The TreeGrid component allows you to customize the appearance and behavior of cells using various features and options. You can define templates, format cell values, enable or disable editing, and perform various other operations on the cells to create interactive and informative tree grids in your web applications.

Displaying the HTML content

Displaying HTML content in a Tree Grid can be useful in scenarios where you want to display formatted content, such as images, links, or tables, in a tabular format. TreeGrid component allows you to display HTML tags in the Tree Grid header and content. By default, the HTML content is encoded to prevent potential security vulnerabilities. However, you can leverage the disableHtmlEncode property and set its value to false. Doing so will disable HTML encoding, allowing HTML tags to be rendered as plain text within the Tree Grid. This feature is useful when you want to display HTML content in a tree grid cell.

In the following example, the EJ2 Toggle Switch Button component is added to enable and disable the disableHtmlEncode property. When the switch is toggled, the change event is triggered and the disableHtmlEncode property of the column is updated accordingly. The refreshColumns method is called to refresh the tree grid and display the updated content.

app.component.ts

import { NgModule, } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridAllModule } from '@syncfusion/ej2-angular-treegrid';
import { SwitchModule } from '@syncfusion/ej2-angular-buttons';
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { ChangeEventArgs } from '@syncfusion/ej2-angular-buttons';

@Component({
    imports: [
    TreeGridAllModule,SwitchModule 
    ],
    standalone: true,
    selector: 'app-container',
    template: `<div>
                    <label style="padding: 10px 10px">Enable or disable HTML Encode</label>
                    <ejs-switch id="switch" (change)="change($event)"></ejs-switch>
                </div>
                <ejs-treegrid #treegrid [dataSource]='data' height='300' [treeColumnIndex]='1' childMapping='subtasks' >
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
                        <e-column field='taskName' headerText="<strong> Task Name </strong>"  textAlign='Left' width=150></e-column>
                        <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
                        <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                    </e-columns>
                </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];
    @ViewChild('treegrid')
    public treegrid?: TreeGridComponent;

    change(args: ChangeEventArgs) {
        if (args.checked) {
            (this.treegrid as TreeGridComponent).getColumnByField('taskName').disableHtmlEncode = false;
        } else {
            (this.treegrid as TreeGridComponent).getColumnByField('taskName').disableHtmlEncode = true;
        }
        (this.treegrid as TreeGridComponent).refreshColumns();
    }

    ngOnInit(): void {
        this.data = sampleData;
       
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

• The disableHtmlEncode property disables HTML encoding for the corresponding column in the tree grid.
• If the property is set to true, any HTML tags in the column’s data will be displayed.
• If the property is set to false, the HTML tags will be removed and displayed as plain text.
• Disabling HTML encoding can potentially introduce security vulnerabilities, so use caution when enabling this feature.
• If enableHtmlSanitizer property of the tree grid is set to true, then the content is sanitized to prevent any potential security vulnerabilities.
• You can also disable the disableHtmlEncode property of the column using getColumns method on change event of Switch component. This is demonstrated in the below code snippet,

change(args) {
  if (args.checked) {
    this.treegrid.getColumns()[1].disableHtmlEncode = false;
  } else {
    this.treegrid.getColumns()[1].disableHtmlEncode = true;
  }
  this.treegrid.refresh();
}

Autowrap the tree grid content

The auto wrap feature allows the cell content in the tree grid to wrap to the next line when it exceeds the boundary of the specified cell width. The cell content wrapping works based on the position of white space between words. To support the Autowrap functionality in the Tree Grid, you should set the appropriate width for the columns. The column width defines the maximum width of a column and helps to wrap the content automatically.

To enable auto wrap, set the allowTextWrap property to true. You can also configure the wrap mode by setting the textWrapSettings.wrapMode property.

Tree Grid provides the below three options for configuring:

• Both - This is the default value for wrapMode. With this option, both the tree grid Header and Content text is wrapped.
• Header - With this option, only the tree grid header text is wrapped.
• Content - With this option, only the tree grid content is wrapped.

The following example demonstrates how to set the allowTextWrap property to true and specify the wrap mode as Content by setting the textWrapSettings.wrapMode property. Also change the textWrapSettings.wrapMode property to Content and Both on changing the dropdown value using the change event of the DropDownList component.

app.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import {  TextWrapSettingsModel, WrapMode } from '@syncfusion/ej2-angular-grids';
import { ChangeEventArgs } from '@syncfusion/ej2-angular-dropdowns';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';

@Component({
    imports: [
    TreeGridAllModule,DropDownListAllModule
    ],
standalone: true,
    selector: 'app-container',
    template: ` <div style="display: flex">
                    <label style="padding: 10px 10px 26px 0"> Change the wrapmode of auto wrap feature: </label> 
                    <ejs-dropdownlist style="margin-top:5px" index="0" width="100" [dataSource]="ddlData" (change)="valueChange($event)"></ejs-dropdownlist>
                </div>
                <ejs-treegrid #treegrid [dataSource]='data' height='275' [treeColumnIndex]='1' allowTextWrap='true' [textWrapSettings]='wrapSettings' childMapping='subtasks' >
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
                        <e-column field='taskName' headerText="Task Name Column for Tree Grid"  textAlign='Left' width=90></e-column>
                        <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
                        <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                    </e-columns>
                </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];
    @ViewChild('treegrid')
    public treegrid?: TreeGridComponent;
    public wrapSettings?: TextWrapSettingsModel;
    public ddlData: object[] = [
        { text: 'Content', value: 'Content' },
        { text: 'Header', value: 'Header' },
        { text: 'Both', value: 'Both' },
      ];
    

    ngOnInit(): void {
        this.data = sampleData;
        this.wrapSettings = { wrapMode: 'Content' };
    }
    valueChange(args: ChangeEventArgs): void {
        (this.treegrid as TreeGridComponent).textWrapSettings.wrapMode = args.value as WrapMode;
      }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

• If a column width is not specified, then the Autowrap of columns will be adjusted with respect to the tree grid’s width.
• If a column’s header text contains no white space, the text may not be wrapped.
• If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In such cases, you can use the headerTemplate and template properties of the column to customize the appearance of the header and cell content.

Customize cell styles

Customizing the tree grid cell styles allows you to modify the appearance of cells in the Tree Grid control to meet your design requirements. You can customize the font, background color, and other styles of the cells. To customize the cell styles in the tree grid, you can use tree grid event, css, property or method support.

Using event

To customize the appearance of the tree grid cell, you can use the queryCellInfo event of the tree grid. This event is triggered when each cell is rendered in the tree grid, and provides an object that contains information about the cell. You can use this object to modify the styles of the cell.

The following example demonstrates how to add a queryCellInfo event handler to the tree grid. In the event handler, checked whether the current column is progress field and then applied the appropriate CSS class to the cell based on its value.

app.component.ts

import { NgModule, } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridAllModule } from '@syncfusion/ej2-angular-treegrid';

import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { QueryCellInfoEventArgs, Column } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [
    TreeGridAllModule,
    ],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid [dataSource]='data' height='275' [treeColumnIndex]='1' [enableHover]='false' [allowSelection]='false' (queryCellInfo)='customizeCell($event)' childMapping='subtasks' >
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
                        <e-column field='taskName' headerText="Task Name Column for Tree Grid"  textAlign='Left' width=90></e-column>
                        <e-column field='progress' headerText='Progress' textAlign='Right' width=90></e-column>
                        <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                    </e-columns>
                </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];
    @ViewChild('treegrid')
    public treegrid?: TreeGridComponent;
   
    ngOnInit(): void {
        this.data = sampleData;
    }
    customizeCell(args: any) {
        if (args.column.field === 'progress' && +args.cell.innerHTML > 90 && +args.cell.innerHTML <= 100){
            args.cell.setAttribute('style', 'background-color:#336c12;color:white;');
        } else if (+args.cell.innerHTML > 20 && args.column.field === 'progress') {
            args.cell.setAttribute('style', 'background-color:#7b2b1d;color:white;');
        }
      }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

• The queryCellInfo event is triggered for every cell of the tree grid, so it may impact the performance of the tree grid when used to modify a large number of cells.

Using CSS

You can apply styles to the cells using CSS selectors. The Tree Grid provides a class name for each cell element, which you can use to apply styles to that specific cell or cells in a particular column. The e-rowcell class is used to style the row cells, and e-cellselectionbackground class is used to change the background color of the selected cell.

.e-treegrid td.e-cellselectionbackground {
  background: #9ac5ee;
  font-style: italic;
}

The following example demonstrates how to customize the appearance of a specific cell when it is selected in the tree grid on selection using className.

app.component.ts

import { NgModule, } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridAllModule } from '@syncfusion/ej2-angular-treegrid';

import { Component, OnInit ,ViewChild,ViewEncapsulation} from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

@Component({
    imports: [
    TreeGridAllModule,
    ],
    standalone: true,
    selector: 'app-container',
    encapsulation:ViewEncapsulation.None,
    template: `<ejs-treegrid #treegrid [dataSource]='data' height='275' [treeColumnIndex]='1' [selectionSettings]="selectOptions" childMapping='subtasks' >
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
                        <e-column field='taskName' headerText="Task Name Column for Tree Grid"  textAlign='Left' width=90></e-column>
                        <e-column field='progress' headerText='Progress' textAlign='Right' width=90></e-column>
                        <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                    </e-columns>
                </ejs-treegrid>`,
    styles:[`
    .e-treegrid td.e-cellselectionbackground {
        background: #9ac5ee;
        font-style: italic;
      }
    `]
})
export class AppComponent implements OnInit {

    public data?: Object[];
    @ViewChild('treegrid')
    public treegrid?: TreeGridComponent;
    public selectOptions: any= {
        mode: 'Cell',
        type: 'Multiple',
    };
    ngOnInit(): void {
        this.data = sampleData;
    }
    
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Using property

To customize the style of the tree grid cells, define customAttributes property to the column definition object. The customAttributes property takes an object with the name-value pair to customize the CSS properties for tree grid cells. You can also set multiple CSS properties to the custom class using the customAttributes property.

.e-customcss {
        background: #d7f0f4;
    }

Here, setting the customAttributes property of the taskID column to an object that contains the CSS class ‘e-customcss’. This CSS class will be applied to all the cells in the taskID column of the tree grid.

<e-column field='taskID' headerText='Task ID' [customAttributes]="{class: 'e-customcss'}" textAlign='Right' width=90></e-column>

The following example demonstrates how to customize the appearance of the taskID and startDate columns using custom attributes.

app.component.ts

import { NgModule, } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridAllModule } from '@syncfusion/ej2-angular-treegrid';
import { Component, OnInit,ViewEncapsulation } from '@angular/core';
import { sampleData } from './datasource';

@Component({
    imports: [
    TreeGridAllModule,
    ],
    standalone: true,
    selector: 'app-container',
    encapsulation:ViewEncapsulation.None,
    template: `<ejs-treegrid [dataSource]='data' height='300' [treeColumnIndex]='1' childMapping='subtasks' >
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' [customAttributes]="{class: 'e-customcss'}" 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' [customAttributes]="{class: 'e-customcss'}" textAlign='Right' format='yMd' width=90></e-column>
                        <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                    </e-columns>
                </ejs-treegrid>`,
    styles: [`
    .e-customcss {
        background: #d7f0f4;
    }
    `],
   
})
export class AppComponent implements OnInit {

    public data?: Object[];
    ngOnInit(): void {
        this.data = sampleData;
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Custom attributes can be used to customize any cell in the tree grid, including header and footer cells.

Using methods

The Tree Grid provides below methods to customize the appearance of the tree grid columns header and cell:

1. getHeaderContent: The getHeaderContent method is used to customize the appearance of the column header in the tree grid and accessing the header element using the querySelector method and applying the style using the style property of the cell element.

2. getCellFromIndex: The getCellFromIndex method is used to customize the appearance of a specific cell in the tree grid by specifying the index of the row and column for which you want to customize the appearance.

The following example demonstrates how to use getColumnHeaderByIndex and getCellFromIndex methods to customize the appearance of the startDate column header and specific cell inside the dataBound event of the tree grid.

app.component.ts

import { NgModule, } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridAllModule } from '@syncfusion/ej2-angular-treegrid';
import { Component, OnInit,ViewChild,ViewEncapsulation } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

@Component({
    imports: [
    TreeGridAllModule,
    ],
    standalone: true,
    selector: 'app-container',
    encapsulation:ViewEncapsulation.None,
    template: `<ejs-treegrid #treegrid [dataSource]='data' height='300' [treeColumnIndex]='1' (dataBound)="dataBound()" childMapping='subtasks' >
                    <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=90></e-column>
                        <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                    </e-columns>
                </ejs-treegrid>`,
   
})
export class AppComponent implements OnInit {

    public data?: Object[];
    @ViewChild('treegrid')
    public treegrid?:TreeGridComponent;
    ngOnInit(): void {
        this.data = sampleData;
    }
    dataBound() {
        let header = (this.treegrid as TreeGridComponent).getHeaderContent().querySelector('.e-headercell');
        (header as HTMLElement).style.backgroundColor = 'red';
        (header as HTMLElement).style.color = 'white';
        let cell = (this.treegrid as TreeGridComponent).getCellFromIndex(1, 3);
        (cell as HTMLElement).style.background = '#f9920b';
        (cell as HTMLElement).style.color = 'white';
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Make sure to pass the correct row and column indices to getCellFromIndex method, or else the appearance of the wrong cell might get customized.

Clip mode

The clip mode feature is useful when you have a long text or content in a tree grid cell, which overflows the cell’s width or height. It provides options to display the overflow content by either truncating it, displaying an ellipsis or displaying an ellipsis with a tooltip. You can enable this feature by setting columns.clipMode property to one of the below available options.

There are three types of clipMode available:

• Clip: Truncates the cell content when it overflows its area.
• Ellipsis: Displays ellipsis when the cell content overflows its area.
• EllipsisWithTooltip: Displays ellipsis when the cell content overflows its area, also it will display the tooltip while hover on ellipsis is applied. Also it will display the tooltip while hover on ellipsis is applied.

The following example demonstrates, how to set the clipMode property to Clip , Ellipsis and EllipsisWithTooltip for the Priority column, on changing the dropdown value using the change event of the DropDownList component. The refreshColumns method is used to refresh the tree grid and display the updated content.

app.component.ts

import { NgModule, } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridAllModule } from '@syncfusion/ej2-angular-treegrid';
import { Component, OnInit,ViewChild,ViewEncapsulation } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { ChangeEventArgs } from '@syncfusion/ej2-angular-dropdowns';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';

@Component({
    imports: [
    TreeGridAllModule,DropDownListAllModule 
    ],
    standalone: true,
    selector: 'app-container',
    encapsulation:ViewEncapsulation.None,
    template: ` <div style="display: flex">
                    <label style="padding: 10px 10px 26px 0"> Change the clip mode: </label>
                    <ejs-dropdownlist style="margin-top:5px" index="0" width="150" [fields]='fields' [dataSource]="ddlData" (change)="valueChange($event)"></ejs-dropdownlist>
                </div>
                <ejs-treegrid #treegrid [dataSource]='data' height='275' gridLines='Both' [treeColumnIndex]='1' childMapping='subtasks' >
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
                        <e-column field='taskName' headerText='Task Name' clipMode='EllipsisWithTooltip' textAlign='Left' width=100></e-column>
                        <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                        <e-column field='progress' headerText='Progress' textAlign='Right' width=80></e-column>
                        <e-column field='priority' headerText='Priority' width=50></e-column>
                    </e-columns>
                </ejs-treegrid>`,
   
})
export class AppComponent implements OnInit {

    public data?: Object[];
    @ViewChild('treegrid')
    public treegrid?:TreeGridComponent;

    public fields: object = { text: 'text', value: 'value' };
    public ddlData: object[] = [
    { text: 'Ellipsis', value: 'Ellipsis' },
    { text: 'Clip', value: 'Clip' },
    { text: 'Ellipsis with Tooltip', value: 'EllipsisWithTooltip' },
  ];

    ngOnInit(): void {
        this.data = sampleData;
    }

    valueChange(args: ChangeEventArgs): void {
        var column_inx=(this.treegrid as TreeGridComponent).getColumnIndexByField('taskName');
        ((this.treegrid as TreeGridComponent).columns[column_inx] as any).clipMode = (args.value as any);
        (this.treegrid as TreeGridComponent).refreshColumns();
      }
   
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

• By default, columns.clipMode value is Ellipsis.
• If you set the width property of a column, the clip mode feature will be automatically applied to that column if the content exceeds the specified width.
• Be careful when using the Clip mode, as it may result in important information being cut off. It is generally recommended to use the Ellipsis or EllipsisWithTooltip modes instead.

Tooltip

The Tree Grid allows you to display information about the tree grid columns to the user when they hover over them with the mouse.

Render bootstrap tooltip in grid cells

The TreeGrid component allows rendering Bootstrap tooltips in the cells. To enable this feature, you need to add the Bootstrap CDN link and use the ngAfterViewChecked method to initialize the tooltip.

This is demonstrated in the sample code below which shows how to enable Bootstrap tooltip for the priority field using ng-template in tree grid cells,

Step 1: Install the Bootstrap and jQuery package in your application using the following commands and add the script and style of the respective packages in the angular.json file,

To install bootstrap, use the following command.

npm install @ng-bootstrap/ng-bootstrap

To install jQuery, use the following command.

npm install jquery

"styles": 
[
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css",
  "node_modules/@syncfusion/ej2-material-theme/styles/material.css"
],
"scripts": ["node_modules/jquery/dist/jquery.min.js"]

Step 2: Add the CDN link of Boostrap in the index.html file. Place the link tag in the head for the CSS, and the script tag for the JavaScript bundle before the closing body.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>

Step 3: The following code demonstrates how to render Bootstrap tooltip for the priority field with ng-template on tree grid cells using ngAfterViewChecked method,

import { Component, OnInit,ViewChild,ViewEncapsulation } from '@angular/core';
import { sampleData } from './datasource';
import { AfterViewChecked, } from '@angular/core';
import 'bootstrap';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
declare var $: any;

@Component({
    selector: 'app-container',
    encapsulation:ViewEncapsulation.None,
    template: ` <ejs-treegrid #treegrid [dataSource]='data' height='275' gridLines='Both' [treeColumnIndex]='1' childMapping='subtasks' >
                    <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=150></e-column>
                        <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                        <e-column field='priority' headerText='Priority' textAlign='Right' width=80>
                            <ng-template #template let-data>
                                <div class="row clearfix">
                                    <div class="col-md-2" style="text-align:right">
                                        <div data-toggle="tooltip" data-container="body" [title]="data.priority" data-placement="left" data-delay='{"show":"800", "hide":"300"}'>
                                            {{data.priority}}
                                        </div>
                                    </div>
                                </div>
                            </ng-template>
                        </e-column>
                    </e-columns>
                </ejs-treegrid>`,
   
})
export class AppComponent implements AfterViewChecked {

    public data?: Object[]= sampleData;
    
    @ViewChild('treegrid')
    public treegrid?: TreeGridComponent;
    ngAfterViewChecked() {
        $('[data-toggle="tooltip"]').tooltip();
    }   
}

• The Bootstrap CDN link must be added to the HTML file.
• The ngAfterViewChecked method is called after the component’s view has been fully initialized, so it is a good place to initialize the Bootstrap tooltip.

Display custom tooltip for columns

The Tree Grid provides a feature to display custom tooltips for its columns using the EJ2 Tooltip component. This allows you to provide additional information about the columns when hovering over the tree grid cells.

To enable custom tooltips for columns in the Tree Grid, you can render the Tree Grid control inside the Tooltip component and set the target as .e-rowcell. This will display the tooltip when hovering over the tree grid cells.

Change the tooltip content for the tree grid cells by using the following code in the beforeRender event.

 beforeRender(args): void {
    if (args.target.classList.contains('e-rowcell')) {
        // event triggered before render the tooltip on target element.
        this.tooltip.content = 'This is value "' + args.target.innerText + '" ';
    }
  }

The following example demonstrates how to customize the tooltip content for the tree grid cells by using the beforeRender event of the EJ2 Tooltip component.

app.component.ts

import { NgModule, } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridAllModule } from '@syncfusion/ej2-angular-treegrid';
import { Component, OnInit,ViewChild,ViewEncapsulation } from '@angular/core';
import { sampleData } from './datasource';
import { TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-angular-popups';
import { TooltipModule } from '@syncfusion/ej2-angular-popups';

@Component({
    imports: [
    TreeGridAllModule,TooltipModule
    ],
    standalone: true,
    selector: 'app-container',
    encapsulation:ViewEncapsulation.None,
    template: `<ejs-tooltip #tooltip target=".e-rowcell" (beforeRender)="beforeRender($event)">
                    <ejs-treegrid #treegrid [dataSource]='data' height='275' gridLines='Both' [treeColumnIndex]='1' childMapping='subtasks' >
                        <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=100></e-column>
                            <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                            <e-column field='priority' headerText='Priority' textAlign='Right' width=80></e-column>
                        </e-columns>
                    </ejs-treegrid>
                </ejs-tooltip>
                `,
   
})
export class AppComponent implements OnInit {

    public data?: Object[];
    
    @ViewChild('tooltip')
    public tooltip?: TooltipComponent;
    

    ngOnInit(): void {
        this.data = sampleData;
    }

    beforeRender(args: TooltipEventArgs): void {
        if (args.target.classList.contains('e-rowcell')) {
            (this.tooltip as TooltipComponent).content = 'The value is "' + args.target.innerText + '" ';
        }
    }
   
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Grid lines

The gridLines in a tree grid are used to separate the cells with horizontal and vertical lines for better readability. You can enable the tree grid lines by setting the gridLines property to one of the following values:

Modes	Actions
Both	Displays both the horizontal and vertical grid lines.
None	No grid lines are displayed.
Horizontal	Displays the horizontal grid lines only.
Vertical	Displays the vertical grid lines only.
Default	Displays grid lines based on the theme.

The following example demonstrates how to set the gridLines property based on changing the dropdown value using the change event of the DropDownList component.

app.component.ts

import { NgModule, } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridAllModule } from '@syncfusion/ej2-angular-treegrid';
import { Component, OnInit,ViewChild,ViewEncapsulation } from '@angular/core';
import { sampleData } from './datasource';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { ChangeEventArgs } from '@syncfusion/ej2-angular-dropdowns';

@Component({
    imports: [
    TreeGridAllModule,DropDownListAllModule
    ],
    standalone: true,
    selector: 'app-container',
    encapsulation:ViewEncapsulation.None,
    template: ` <div style="display: flex">
                    <label style="padding:  10px 10px 26px 0"> Change the grid lines: </label> 
                    <ejs-dropdownlist style="margin-top:5px" id="value" #dropdown index="0" width="100" [dataSource]="ddlData" (change)="valueChange($event)"></ejs-dropdownlist>
                </div>
                    <ejs-treegrid #treegrid [dataSource]='data' height='275' gridLines='Both' [treeColumnIndex]='1' childMapping='subtasks' >
                        <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=100></e-column>
                            <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                            <e-column field='priority' headerText='Priority' textAlign='Right' width=80></e-column>
                        </e-columns>
                    </ejs-treegrid>`,
   
})
export class AppComponent implements OnInit {

    public data?: Object[];
    
    @ViewChild('treegrid')
    public treegrid?: TreeGridComponent;
    
    public ddlData: object[] = [
        { text: 'Default', value: 'Default' },
        { text: 'Both', value: 'Both' },
        { text: 'Horizontal', value: 'Horizontal' },
        { text: 'Vertical', value: 'Vertical' },
        { text: 'None', value: 'None' },
    ];

    ngOnInit(): void {
        this.data = sampleData;
    }

    valueChange(args: ChangeEventArgs): void {
        (this.treegrid as TreeGridComponent).gridLines = args.value as any;
    }
   
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

By default, the tree grid renders with Default mode.

See Also

How to customize the expand/ collapse icon in tree grid
How to change indent space of tree column cell text