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

TreeGrid Refresh not working

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;
this.tgInstance.refresh();

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.

Thanks,
Shiva 

3 Replies

PP Pooja Priya Krishna Moorthy Syncfusion Team 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. 
 
[app.component.html] 
    <button(click) = 'ChangeData()' type = 'button'> Change DataSource</button> 
 
[app.component.ts] 
    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. 
 
Regards, 
Pooja K. 



SS Samba Shiva Rao Enuganti 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)

Thanks



RR Rajapandi Ravi Syncfusion Team 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'> 
        <e-columns> 
            .  .  .  .  .  . 
            .  .  .  .  .  . 
        </e-columns> 
    </ejs-treegrid> 
</div> 
 
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. 


Regards, 
Rajapandi R 


Loader.
Up arrow icon