[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",
//…
}]
}
} |
<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
}
} |