We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

TreeGrid Refresh not working

Thread ID:





149704 Dec 4,2019 09:29 AM UTC Dec 6,2019 01:12 PM UTC Angular - EJ 2 3
Tags: TreeGrid
Samba Shiva Rao Enuganti
Asked On December 5, 2019 04:02 AM UTC

Hi Team,

I am using TreeGrid control in my application.

I am trying to refresh the grid with new datasource as below, but grid not displaying newly added items on the UI.  

this.tgInstance.dataSource = this.data;

And also I have two columns(Name & Value) in treegrid, is it possible to change editType for Value on each row(like for some rows I need Date & some rows Integer & string)?

If it is possible, please share some sample on this.


Pooja Priya Krishna Moorthy [Syncfusion]
Replied On December 5, 2019 07:09 AM UTC

Hi Shiva, 
Greetings from Syncfusion support. 
As the dataSource property supports two-way binding, we can directly assign the new data as shown in the below code example. 
    <button(click) = 'ChangeData()' type = 'button'> Change DataSource</button> 
    export class AppComponent { 
        public treeGridData: any = {}; 
        public constructor() { 
            this.treeGridData = [{ 
        ChangeData() { 
            this.treeGridData = [{ taskID: 7, taskName: "Design", 
We have prepared a sample and updated the data source of TreeGrid on button click action, please find the sample from  below link. 
Note: We have released our EJ2 version of TreeGrid. We suggest you to use our newer version of TreeGrid which is purely JavaScript based. Please refer the below documentation and sample link. 
Please get back to us if you require further assistance on this. 
Pooja K. 

Samba Shiva Rao Enuganti
Replied On December 6, 2019 05:29 AM UTC

Hi Pooja,

Provided sample not working for me, getting following error while build....
The build command requires to be run in an Angular project, but a project definition could not be found.

We are using angular8 and ej2 version of treegrid only(ejs-treegrid), but it's not working for me when I update the treegrid data nothing is happening.
And We need to change the editType for one column in each row(not on different columns)


Rajapandi Ravi [Syncfusion]
Replied On December 6, 2019 01:12 PM UTC

Hi Shiva, 

Thanks for the update. 

Query#: I am trying to refresh the grid with new datasource as below, but grid not displaying newly added items on the UI.   

Based on your query we have prepared a sample and achieved your requirement in button “click” event. Please refer the below sample for more information. 

<button ejs-button (click)="onClick($event)" #button>Refresh DATA</button> 
<div class="control-section"> 
    <ejs-treegrid [dataSource]='data' childMapping='subtasks' [treeColumnIndex]='1'  [pageSettings]='pageSetting' allowPaging='true'> 
            .  .  .  .  .  . 
            .  .  .  .  .  . 
export class AppComponent { 
    public data: Object[] = []; 
    public pageSetting: Object; 
    ngOnInit(): void { 
        this.data = sampleData;      //Initial rendering datasource 
    onClick(): void { 
var treegrid = (document.getElementsByClassName('e-treegrid')[0] as any).ej2_instances[0];  //Treegrid instance 
treegrid.dataSource = refreshdata;  //change the datasource in click event 

Query#: We need to change the editType for one column in each row(not on different columns) 

For this query, to add a custom component for a particular column you can get “arguments” in write method. Based on the arguments rowdata you can render the different component in particular column. Please refer the below documentation for more information. 

Rajapandi R 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon