Scrolling in Angular TreeGrid component

25 Aug 202516 minutes to read

The scrolling feature in the TreeGrid component enables navigation through large amounts of data that extend beyond the visible area. Scrollbars are automatically displayed when the content exceeds the specified width or height of the TreeGrid. This feature is essential for presenting extensive content or working within limited screen space.

  • A vertical scrollbar appears when the total row height exceeds the TreeGrid’s height.
  • A horizontal scrollbar appears when the total column width exceeds the TreeGrid’s width.
  • The height and width properties control the TreeGrid’s dimensions.

By default, the TreeGrid’s height and width are set to auto.

Set width and height

You can set exact width and height for the TreeGrid component according to your UI requirements by assigning a numeric pixel value or percentage to the width and height properties.

For example, set the TreeGrid’s height to 315 pixels and width to 400 pixels to enable scrollbars:

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

@Component({
    imports: [TreeGridModule],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid [dataSource]='data' height=315 width=400 [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=250></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[];

    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));

Responsive with parent container

Create a responsive layout by setting the TreeGrid’s width and height to 100%. The TreeGrid will fill its parent container and adjust its size dynamically. The parent element must have an explicit height for the TreeGrid’s 100% height to take effect.

To achieve this, you need to specify the width and height properties of the tree grid as 100%. However, setting the height property to 100% requires the tree grid’s parent element to have an explicitly defined height.

In the following example, the parent container has explicit height and width set, and the tree grid container’s height and width are both set to 100%. This ensures that the tree grid adjusts its size responsively based on the dimensions of the parent container:

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

@Component({
    imports: [TreeGridModule],
    standalone: true,
    selector: 'app-container',
    template: `<div style="height:350px;width:600px">
                <ejs-treegrid [dataSource]='data' height='100%' width='100%' [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=250></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>
                </div>`
})
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));

The TreeGrid offers sticky headers, which keep column headers visible at the top while scrolling vertically. This enhances user experience by maintaining data context during navigation of wide or long hierarchical data sets.

For example, in a project management application, users often need to scroll through a detailed list of tasks and subtasks. When the dataset is large, scrolling down can cause confusion if the column headers scroll out of view, making it difficult to remember what each column represents. By enabling sticky headers, the column headers remain visible even while scrolling, allowing users to easily keep track of the data context.

To enable sticky headers in the TreeGrid, you can simply set the enableStickyHeader property to true. This makes the column headers stick to the top of the TreeGrid container or its parent scrolling container when you scroll vertically.

The following sample demonstrates how to enable or disable the sticky header in the TreeGrid using a Switch and its change event:

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

@Component({
    imports: [ TreeGridAllModule, SwitchModule ],
    standalone: true,
    selector: 'app-container',
    template: `
      <div style="padding:10px 0px 20px 0px">
        <label style="font-weight: bold; padding-right: 20px;">Enable/Disable Sticky Header</label>
        <ejs-switch id="switch" [(checked)]="isSticky" (change)="toggleStickyHeader($event)"></ejs-switch>
      </div>
      <div style='height:350px;'>
        <ejs-treegrid #treegrid [dataSource]='data' [treeColumnIndex]='1' [enableStickyHeader]='isSticky' 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=250></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>
      </div>`
})
export class AppComponent implements OnInit {
  @ViewChild('treegrid') public TreeGridObj?: TreeGridComponent;
  public data?: Object[];
    public isSticky: boolean = true;

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

    toggleStickyHeader(args: ChangeEventArgs): void {
        this.isSticky = args.checked ?? false;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Scroll to selected row

Scroll the TreeGrid content to bring the selected row into view using the rowSelected event. This is especially useful when working with large datasets.

The following example demonstrates how to use the rowSelected` event to scroll to the selected row:

import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { RowSelectEventArgs } from '@syncfusion/ej2-grids';
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent  } from '@syncfusion/ej2-angular-treegrid';
import { NumericTextBoxComponent } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [TreeGridModule,  NumericTextBoxModule  ],
    standalone: true,
    selector: 'app-container',
    template: `  <div style="display: flex">
                    <label> Select row index :  </label>
                        <ejs-numerictextbox #numerictext  min="0" max="35" width='100'  format= 'N' value="0" (change)='onChange($event)' ></ejs-numerictextbox>
                </div>
                <div style="padding: 20px 17px 0 0">
                    <ejs-treegrid #treegrid [dataSource]='data' height='260' width='100%' [treeColumnIndex]='1'  childMapping='subtasks' (rowSelected)='rowSelected($event)'[selectedRowIndex]='0'>
                        <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>
                </div>`
})
export class AppComponent implements OnInit {

    public data?: Object[];

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

    @ViewChild('treegrid')
    public treeGridObj?: TreeGridComponent;
    @ViewChild('numerictext')
    public numeric?: NumericTextBoxComponent;
    onChange(args: any): void {
        this.treeGridObj?.selectRow(parseInt((this.numeric as NumericTextBoxComponent).getText(), 10));
    }

    rowSelected(args: RowSelectEventArgs) {
        let rowHeight: number = (this.treeGridObj as TreeGridComponent).getRows()[(this.treeGridObj as TreeGridComponent).getSelectedRowIndexes()[0]].scrollHeight;
        (this.treeGridObj as TreeGridComponent).getContent().children[0].scrollTop = rowHeight * (this.treeGridObj as TreeGridComponent).getSelectedRowIndexes()[0];
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Hide the empty placeholder of the scrollbar

You can hide the empty placeholder of the TreeGrid’s scrollbar for a cleaner interface. Use the hideScroll method on the TreeGrid instance, typically within the dataBound event.

Here is an example of using hideScroll:

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


@Component({
    imports: [TreeGridModule ],
    standalone: true,
    selector: 'app-container',
    template: ` <ejs-treegrid #treegrid [dataSource]='data' height='260' width='100%' [treeColumnIndex]='1'  childMapping='subtasks' (dataBound)='dataBound()'>
                    <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[];

    ngOnInit(): void {
        this.data = sampleData.slice(0, 1);
    }

    @ViewChild('treegrid')
    public treeGridObj?: TreeGridComponent;
   
    dataBound(): void {
        (this.treeGridObj as TreeGridComponent).grid.hideScroll();
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));