Scrolling in Angular TreeGrid component

27 Jun 202517 minutes to read

The scrolling feature in the TreeGrid component allows navigation through content that extends beyond the visible area of the tree grid. Scrollbars are automatically displayed when the content exceeds the specified width or height of the tree grid element. This feature is useful for large amounts of data or when content needs to be displayed within a limited space. The vertical and horizontal scrollbars will be displayed based on the following criteria:

  • The vertical scrollbar appears when the total height of the rows exceeds the height of the tree grid element.
  • The horizontal scrollbar appears when the total width of the columns exceeds the width of the tree grid element.
  • The height and width are used to set the tree grid height and width, respectively.

The default value for heightand width of the tree grid is auto.

Set width and height

The TreeGrid component offers a straightforward method to tailor the width and height of the tree grid component to meet your specific requirements. This is particularly useful when you want precise control over the dimensions of the tree grid. To achieve this, you can use pixel values as numbers or percentage values for the width and height properties of the tree grid.

In the following example, the scrollbar is enabled, and the tree grid’s height is set to 315 pixels, while the width is set to 400 pixels:

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

The TreeGrid component allows you to create a responsive layout by making it fill its parent container and automatically adjust its size based on the available space and changes in the container’s dimensions. This capability is particularly useful for building applications that need to adapt to various screen sizes and devices.

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 Syncfusion Angular TreeGrid provides a useful feature to keep the column headers fixed (sticky) while scrolling through large datasets. This ensures that the headers remain visible at all times, enhancing user experience by making it easier to understand the context of the data displayed, especially when dealing with wide or long hierarchical data.

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

The TreeGrid component allows you to scroll the tree grid content to the position of the selected row, ensuring that the selected row is automatically brought into view. This feature is particularly useful when dealing with a large dataset and wanting to maintain focus on the selected row. To achieve this, you can utilize the rowSelected event of the Tree Grid.

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 placehoder of scrollbar

The TreeGrid component provides support to hide the empty placeholder of the scrollbar, offering a cleaner interface without unnecessary scrollbars. To achieve this, you can utilize the hideScroll method of the grid object using the tree grid instance. This method allows you to determine whether the scrollbar should be hidden based on the content’s overflow.

The following example demonstrates how to use the hideScroll method inside the dataBound event:

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