I am in need of creating a treeView that can handle dynamic data. Currently, I am utilizing the syncfusion component which can be found at this link.
The challenge I am facing is that the data object I receive is incomplete, with the "children" being generated as I access them using the id. As a result, I am able to display the initial categories but struggle to link them with their children.
Below is the code snippet from app.component.html:
<div class="control-section" style="overflow:hidden;">
<div class="col-lg-12">
<div class='col-lg-6 nested-data'>
<div class='content'>
<h4>Categories</h4>
<ejs-treeview id="tree" #tree [checkedNodes]='checkedNodes' [fields]='fields'>
</ejs-treeview>
</div>
</div>
</div>
</div>
And here is the corresponding app.component.ts:
treeData!: object;
public fields = {
dataSource: this.treeData,
id: 'SID',
text: 'Name',
child: 'Children'
};
public showCheckBox = true;
public checkedNodes: string[] = ['70', '1', '88'];
ngOnInit(): void {
if(this.request){
const res = this.service.getCategory(this.request);
if(res){
this.Cats= res;
res.subscribe(tree =>{
this.treeData = tree.Category
this.fields= {
dataSource: this.treeData,
id: tree.SID,
text: 'Name',
child: 'Children'
};
})
}
}
Currently, the issue lies in the fact that only the initial categories are displayed, without their children. Clicking on a category to retrieve its id and fetch the daughter categories is a workaround, but I am unable to do so due to the information being accessible only within a subscribe function and not globally stored. Any suggestions or solutions would be greatly appreciated.
Could someone offer assistance?