typescriptangular-slickgrid

How to show up data from Db directly when initializing Angular-slickgrid Tree instead of just after clicking on row header


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>

Solution

  • 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 :-)