my first questions so accept my apologies if I do sth wrong ;-)
I am creating an web-app which is using angular-slickgrid Tree so show some data from a database. Creating the Tree itself is working and I am getting those data in the frontend by using a promise to get them from backend and therefore from my db. For that I in particular expanded this "Example 29: Tree Data (from a Hierarchical Dataset)" of angular-slickgrid. My version of this is 2.30.2, Angular Version is 11.2.12 and Typescript 4.1.
My problem is, that those data do not show up automatically in the tree, but just after I click on the row header... so those data arrive frontend indeed! Unfortunatly I could not find out which event is exactly triggered (looked in web debugger and inspector).
I was said, actually it should work just by giving my db-data to the so called "datasetHierarchical" varible (after they arrived in the frontend) since there is an assignment in the html '[datasetHierarchical]="datasetHierarchical"'. For mocks directly in the Tree-Component this is working. But in my case with data from a db this does not work as well as all methods I tried like 'this.angularGrid.sortService.sortLocalGridByDefaultSortFieldId();' or 'this.angularGrid.gridService.invalidateHierarchicalDataset(this.datasetHierarchical);', which I thought should re-render the Tree-Grid after my data arrived frontend.
It is kind of frustrating that such a trivial thing does not work but maybe does someone else see (a simple) solution I oversaw... So thanks for any help in advance! :-)
And the data request is also quite simple:
getDataFromDB(): Promise<Array<any>> {
return this._host.get<any>("data").toPromise();
}
In Addition I proofed if data really arrive frontend: and yes they do!
ngOnInit(){
this.defineGrid();
this._service.getDataFromDB().
then((data) => {
if (data !== undefined && data !== null && data.length > 0) {
this.datasetHierarchical = data;
}});
}
And in my html:
<angular-slickgrid class="grid" gridId="grid29"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[datasetHierarchical]="datasetHierarchical"
(onAngularGridCreated)="angularGridReady($event)">
</angular-slickgrid>
Thanks for help, but I found a solution after I looked closely in the lib. I guess a timeout is not working right, so I added one after my data arrived from DB:
this.datasetHierarchical = data;
setTimeout(() => {
this.angularGrid.sortService.sortLocalGridByDefaultSortFieldId();
},50);
Now all data from DB show up automatically when I start the app :-)