Cell in Angular TreeGrid component

26 Aug 202524 minutes to read

In the Syncfusion® Angular TreeGrid, a cell represents the intersection of a row and a column, displaying specific data associated with that row and column. Each cell can contain text, numbers, or other content relevant to the underlying data.

The TreeGrid component enables comprehensive customization of cell appearance and behavior. Features include templates, cell value formatting, editing capabilities, and interactive enhancements for building dynamic and informative TreeGrid applications.

Displaying HTML content

Displaying HTML content in the TreeGrid is helpful when presenting formatted data such as images, links, or tables. By default, HTML content is encoded to prevent security vulnerabilities. To render HTML tags within cells, set the disableHtmlEncode property to true for the required column. Disabling encoding allows HTML tags to be rendered as HTML within the TreeGrid.

In the following example, the EJ2 Toggle Switch Button component is used to enable or disable the disableHtmlEncode property. Toggling the switch triggers the change event, which updates the column property and calls the refreshColumns method to update content rendering.

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;
       
    }
}
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 specified column.
  • If set to false, HTML tags in the column’s data are rendered. If set to true, HTML tags are displayed as plain text.
  • Disabling HTML encoding may introduce security risks (such as XSS). Use enableHtmlSanitizer to mitigate vulnerabilities.
  • Column properties can be controlled at runtime via the getColumns method and change events.
change(args) {
  if (args.checked) {
    this.treegrid.getColumns()[1].disableHtmlEncode = false;
  } else {
    this.treegrid.getColumns()[1].disableHtmlEncode = true;
  }
  this.treegrid.refresh();
}

Autowrap the TreeGrid content

The auto wrap feature ensures that cell content wraps to the next line when exceeding the defined cell width. Wrapping behavior is determined by available whitespace and column width settings.

To enable auto wrap, set the allowTextWrap property to true. The wrap behavior can be further defined by textWrapSettings.wrapMode:

  • Both: (default) Wraps header and content text.
  • Header: Wraps only header text.
  • Content: Wraps only content cells.

The following example demonstrates configuring allowTextWrap and dynamically changing wrap modes using the change event.

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

  • Column width influences the auto wrap result. If not specified, wrapping adjusts to the TreeGrid’s width.
  • If header text lacks whitespace, wrapping may not occur.
  • HTML tags within cell content may affect wrapping. For these cases, consider using headerTemplate and template.

Customize cell styles

TreeGrid cell styling can be tailored using several approaches: event handlers, CSS classes, column property settings, and methods.

Using event

To programmatically customize cell appearance as it renders, use the queryCellInfo event. This event provides cell context for custom CSS logic.

In the following example, a queryCellInfo event handler assigns custom classes to the progress field based on value:

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

Using queryCellInfo with a large dataset may impact performance, as the event triggers for each cell during rendering.

Using CSS

The TreeGrid assigns CSS classes to each cell, enabling direct styling. Use .e-rowcell to target row cells, and .e-cellselectionbackground for selected cells.

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

The following example customizes selection appearance using a class name:

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

Using property

The customAttributes property in a column definition applies custom attributes or class names to all cells in that column.

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

The example below demonstrates custom styling for taskID and startDate columns:

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

Custom attributes can apply styles to content, header, and footer cells.

Using methods

Use getHeaderContent to access and style column headers, or getCellFromIndex for specific cell styling.

The following example shows how to use getColumnHeaderByIndex and getCellFromIndex inside the dataBound event:

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

Ensure the correct row and column indices are provided to prevent styling the incorrect cell.

Clip mode

When cell content exceeds cell width, the columns.clipMode property defines how overflow is handled:

  • Clip: Truncates content beyond cell boundaries.
  • Ellipsis: Shows an ellipsis for overflow content.
  • EllipsisWithTooltip: Shows ellipsis and displays the full content as a tooltip on hover.

The following example configures the clipMode property and updates its value dynamically using the change event, with refreshColumns:

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

  • The default columns.clipMode is Ellipsis.
  • When setting width, clip mode activates automatically if content overflows.
  • The “Clip” mode may cause information loss—prefer “Ellipsis” or “EllipsisWithTooltip” for better accessibility.

Tooltip

The TreeGrid supports contextual information via tooltips on cells and columns.

Render Bootstrap tooltip in grid cells

To use Bootstrap tooltips, include the Bootstrap CSS and JavaScript via CDN or npm, then initialize the tooltip in Angular’s ngAfterViewChecked lifecycle.

Install Bootstrap and jQuery:

npm install @ng-bootstrap/ng-bootstrap
npm install jquery

Update angular.json:

"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"]

Add Bootstrap CDN links in index.html as needed.

Example code demonstrates tooltip initialization and template usage for cells:

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();
    }   
}
  • Add the Bootstrap CDN link to the HTML file.
  • ngAfterViewChecked ensures tooltips initialize after view updates.

Display custom tooltip for columns

Use the EJ2 Tooltip component to render TreeGrid tooltips, setting the target to .e-rowcell. Update tooltip content in the beforeRender event:

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

The following example demonstrates customizing tooltip content with EJ2 Tooltip:

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 + '" ';
        }
    }
   
}
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 property controls the display of horizontal and vertical grid lines:

Modes Actions
Both Displays both horizontal and vertical grid lines.
None No grid lines are displayed.
Horizontal Shows only horizontal grid lines.
Vertical Shows only vertical grid lines.
Default Follows the theme’s default grid line setting.

The example below demonstrates dynamic grid line selection via dropdown using the change event:

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

By default, the TreeGrid uses Default mode for grid lines.

See also