0

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>
BadDevMan
  • 11
  • 3
  • you should provide some code of what you tried, that would help to understand your question and most people won't answer question unless they see code – ghiscoding Jul 08 '21 at 13:03
  • I don't really know why you're struggling with this, but just to make sure I even tried to wrap the dataset assignment into a `setTimeout` to add a delay of 2sec. to simulate a backend server to make sure it works and it does work as expected, the data shows up as expected 2 sec. later and everything looks ok to me. `setTimeout(() => this.datasetHierarchical = this.mockDataset(), 2000);` – ghiscoding Jul 08 '21 at 14:28
  • Thanks for ur answer. Code is quite simple and like the example, but I get the data from DB by 'this._service.getDataFromDB().then((data) => {this.datasetHierarchical = data; });' in ngOnInit. The service function is also quite simple: 'getDataFromDB(): Promise> { return this._host.get("data").toPromise();}'. Still those data do not show up automatically... – BadDevMan Jul 09 '21 at 07:56
  • I used slickgrid before and in older versions (before TreeData was added as option) those automatically re-rendering with data from a db worked well... so I am really confused ^^ – BadDevMan Jul 09 '21 at 08:35
  • it looks like you answered your own question (2x times below), unless it's supposed to be part of your question? If it's supposed to be part of your question, then edit your question, because now no one will answer since you already put 2 answers. Tree Data is a whole different beast, SlickGrid by itself doesn't support it directly, what we do is to keep 2 datasets internally (1 flat and 1 hierarchical for sorting & filtering, then we use the flat to display it in the grid). I'm not sure why you're showing a Promise but it should be an array of data not a Promise – ghiscoding Jul 09 '21 at 12:43
  • The promises is just for getting data from DB. As u can see 'Promise>' it is an Array of any in the end. Nonetheless it is not working... Just setting the 'this.datasetHierarchical' with those data from db does not work. All other ideas did not work too... :-/ – BadDevMan Jul 12 '21 at 06:40
  • sorry but I can't help you unless you provide a full example that I can test with, you should also show the grid options you used with tree data and what does your data look like?. The reason that it works after sorting is that it is rebuilding the flat & hierarchical datasets every time you do sorting/filtering, perhaps you can try providing the `initialSort`, read the [Tree Data - Wiki](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Tree-Data-Grid). I made a demo for hierarchical data but most projects, like ours, use the parent/child tree data. – ghiscoding Jul 12 '21 at 12:19

1 Answers1

1

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

BadDevMan
  • 11
  • 3
  • oh that is unexpected but good info, I might add a comment in the Wiki/Example. Could it be that you get your data even before creating/rendering the grid? Does it work with `0` instead of `50`? Also did you have `this.datasetHierarchical = [];` in your class before assigning it? Because that should take care of the racing condition, at least I would think of, so did you forget to add that? – ghiscoding Jul 15 '21 at 14:35