Refresh the data source in Angular TreeGrid component

27 Aug 20256 minutes to read

How to refresh the data source

Records can be added or deleted from the data source using an external button. To reflect these changes in the TreeGrid, assign the updated data to the dataSource property.

Follow these steps to refresh the TreeGrid after a data source change:

Step 1:

Add or delete a data source record using the following code:

    const dataSource: object = extendArray((this.treegridObj as TreeGridComponent).dataSource as object[]);

    // Added New Record.
    (dataSource as object[]).unshift({ TaskID: 99, TaskName: "New Data", StartDate: new Date('02/03/2017'), Duration: 10 });

    // Delete record.
    (dataSource as object[]).splice(selectedRowIndex, 1);

Step 2:

Refresh the TreeGrid after modifying the data source by reassigning the updated data to the dataSource property.

    (this.treegridObj as TreeGridComponent).dataSource = dataSource; // Refresh the TreeGrid.

app.component.ts

import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'



import { Component, OnInit, ViewChild } from '@angular/core';
import { projectData } from './datasource';
import { TreeGridComponent , extendArray  } from '@syncfusion/ej2-angular-treegrid';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';

@Component({
imports: [
        
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule
    ],

providers: [PageService,
                SortService,
                FilterService],
standalone: true,
    selector: 'app-container',
    template: `<button #btn1 ejs-button cssClass="e-flat"  (click)="add()">Add</button>
    <button #btn2 ejs-button cssClass="e-flat" (click)="delete()">Delete</button>
    <ejs-treegrid #treegridObj [dataSource]='data' idMapping='TaskID' parentIdMapping='parentID' [treeColumnIndex]='1'[height]='280'>
        <e-columns>
            <e-column field='TaskID' headerText='Task ID' width='70' textAlign='Right'></e-column>
            <e-column field='TaskName' headerText='Task Name' width='100'></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='90' textAlign='Right'></e-column>
            <e-column field='Priority' headerText='Priority' width='90'></e-column>
        </e-columns>
    </ejs-treegrid>`,
})
export class AppComponent implements OnInit {

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

    ngOnInit(): void {
        this.data = projectData;
    }
    add() {
        const dataSource = extendArray((this.treegridObj as TreeGridComponent).dataSource as object[]);
        (dataSource as object[]).unshift({ TaskID: 99, TaskName: "New Data", StartDate: new Date('02/03/2017'), EndDate: new Date('04/04/2017'), Duration: 10, Priority: "High" }); // Add record.
        (this.treegridObj as TreeGridComponent).dataSource = dataSource; // Refresh the TreeGrid.
    }
    delete() {
        const selectedRow = (this.treegridObj as TreeGridComponent).getSelectedRowIndexes().length;
        const selectedRowIndex = (this.treegridObj as TreeGridComponent).getSelectedRowIndexes()[0];
        const dataSource = extendArray((this.treegridObj as TreeGridComponent).dataSource as object[]);
        if (selectedRow > 0) {
            (dataSource as object[]).splice(selectedRowIndex, 1); // Delete record.
        }
        else {
            alert("No records selected for delete operation");
        }
        (this.treegridObj as TreeGridComponent).dataSource = dataSource; // Refresh the TreeGrid.
    }
}

main.ts

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

Refresh the header by using the refreshHeader method in the tree grid.
Refresh both the header and the content by using the refresh method in the tree grid.
Refer to Syncfusion^® Angular Tree Grid feature tour page for its groundbreaking feature representations. You can also explore Syncfusion^® Angular Tree Grid example to knows how to present and manipulate data.
You can refer to our Angular Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our Angular Tree Grid example to knows how to present and manipulate data.