SlickGrid requires a valid container, #contactsGrid3 does not exist in the DOM. about angular-slickgrid HOT 9 CLOSED

Without seeing the entire code, it's hard to help you but there might be a few things you can check. First of all, Angular-Slickgrid uses internally the gridId to create the SlickGrid grid, you passed a gridId, so you're ok on that side. Some notes, when you use (onAngularGridCreated), there is no reason to use (onDataviewCreated) and (onGridCreated), the last 2 were created long time ago and the only reason I don't remove them is to not break anyone's code, so keep only (onAngularGridCreated).

Other things to look into, do you have multiple grids? Are you creating the columnDefinitions and they gridOptions after the cycle ngOnInit or afterViewInit? Remember that it won't work in the constructor (too early in the cycle) which, now that I think of it, might be your problem.

from angular-slickgrid.

Hi,
Thanks for the answer.
I removed (onDataviewCreated) and (onGridCreated) methods, also my columnDefinitions and gridOptions are in ngOnInit method.
still getting the same error:
ERROR Error: SlickGrid requires a valid container, #contactsGrid3 does not exist in the DOM.
My grid should be placed on Angular Material tab component (mat-tab). If I move the grid out of the mat-tab and removing id from root div - everything is working.
Looks like problem to create grid wrapper inside mat-tab component.

from angular-slickgrid.

I never used Material, I prefer Bootstrap and made the lib around it, but it should work with Material (it will still need to Bootstrap). It's also useful to know that SlickGrid (the core lib, not my lib) has some problem when the grid is hidden, which might be your problem with your tabs. What you can try to do is to add an *ngIf on <angular-slickgrid> (or on a <div> that wraps Angular-Slickgrid) to only create it when the Tab is shown, I remember having to do that in some cases

from angular-slickgrid.

Hi,
It is working with *ngIf and need to be seted containerId in autoresize property.
Thanks

from angular-slickgrid.

@audrys so I assume that we can close the issue then?

from angular-slickgrid.

Closing as I think this is now resolved. I can reopen if need be.
Again up vote ⭐️ if you like the lib, thanks :)

from angular-slickgrid.

Could you please attach a sample code of how to solve this? I tried it with the above steps and could not figure it out.

from angular-slickgrid.

What you can try to do is to add an *ngIf on <angular-slickgrid> (or on a <div> that wraps Angular-Slickgrid) to only create it when the Tab is shown

isn't it clear enough?

<angular-slickgrid *ngIf="tabReady">

If you can't understand, then please ask your question on Stack Overflow

from angular-slickgrid.

what refers tabReady ?

from angular-slickgrid.