Bug: attaching a grid to collapsible layout cell

Hello,

There is a bug in DHTMLX Suite 7.0 which makes the whole layout system fail when a panel is collapsed (by user click) and expanded again when a grid is added to a collapsible layout cell.

Example snippet here:
https://snippet.dhtmlx.com/7t59618v

( This was minimally changed from the ‘Layout. Collapsable’ example )

Collapse works fine, but when restoring, the error produced in the console is like :

Uncaught TypeError: el is null
patch domvm.micro.js:1224
redrawSync domvm.micro.js:1647
hydrateBody domvm.micro.js:994
hydrate domvm.micro.js:1017
hydrateBody domvm.micro.js:986
hydrate domvm.micro.js:1017
hydrateBody domvm.micro.js:986
hydrate domvm.micro.js:1017
syncDir domvm.micro.js:1073
syncChildren domvm.micro.js:1135
patchChildren domvm.micro.js:1427
patch domvm.micro.js:1246
patchChildren domvm.micro.js:1376
patch domvm.micro.js:1246
redrawSync domvm.micro.js:1647
redraw domvm.micro.js:1511
_redrawAsync domvm.micro.js:1453
call domvm.micro.js:139
raft domvm.micro.js:145
redraw domvm.micro.js:1511
paint Cell.ts:60
paint Cell.ts:62
expand Cell.ts:113
toggle Cell.ts:125
toggle Cell.ts:364
bindEv domvm.micro.js:845
patchEvent domvm.micro.js:899
patchAttrs domvm.micro.js:953
hydrate domvm.micro.js:1011
hydrateBody domvm.micro.js:986
hydrate domvm.micro.js:1017
hydrateBody domvm.micro.js:986
hydrate domvm.micro.js:1017
redrawSync domvm.micro.js:1650
mount domvm.micro.js:1544
mount view.ts:35
Layout Layout.ts:34

I’d love to know when this bug gets fixed! Or if there are any workarounds …

Many thanks,
QA

Set container to null and error doesn’t appear

grid = new dhx.Grid(null, {

Great to know! Thankyou!! Although still a bit bizarre…might wanna add that to the backlog :slight_smile:

Also, I think there is something seriously wrong with the configuration of your forum website - my original post which started this topic has been flagged as spam ?!

Could you please, clarify where it is hidden from. The topic seems to display well for me.

I think this must have been a temporary failure with this forum, as it is displaying well for me now too…:man_facepalming:

I am running into this same error and I have all of my containers set to “null” and use the “attach” method instead (e.g., “layout_GridKP.getCell(“rowcontainer”).attach(grid_KP);)” so the reported ‘fix’ (jb1) does not apply to my error.

I have spent almost a full day trying to figure out why I am getting this error. I stumbled upon this post in the Forum today.

Steps I’ve taken: If I comment out the “show” method for one of the layers I have hidden (remains hidden until a Grid “cellClick”) the error goes away but, of course, that layer then remains hidden. As soon as I evoke the “show” for this layer (using the Grid “cellClick”), the error comes back.

Chrome Tools (Sources) shows:

Could not load content for webpack://dhx/…/node_modules/domvm/dist/micro/domvm.micro.js (HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME)

Chrome Tools (Console) shows:

Uncaught TypeError: Cannot set properties of null (setting ‘_node’)
at patch (domvm.micro.js:1224)
at ViewModel.redrawSync [as _redraw] (domvm.micro.js:1647)
at hydrateBody (domvm.micro.js:994)
at hydrate (domvm.micro.js:1017)
at hydrateBody (domvm.micro.js:986)
at hydrate (domvm.micro.js:1017)
at ViewModel.redrawSync [as _redraw] (domvm.micro.js:1650)
at hydrateBody (domvm.micro.js:994)
at hydrate (domvm.micro.js:1017)
at domvm.micro.js:1073

… which is identical to many lines of the error reported by QA_Collective (above).

On this same page, I have over 20 layer hide/show scenarios that all function beautifully and one “show” triggered by a Grid “cellClick” that fails (error above).

Is this a bug caused by the interaction of a Grid “cellClick” and a Layout “show” that needs to be fixed?

A quick reply will be appreciated (this project is now delayed and overdue as a result of this error). Thank you.

I was receiving similar errors when expanding a collapsed layout cell that contained a toolbar. What I found is that I got this error if I tried to expand() the cell when all the buttons on the toolbar were hidden. But if even 1 button was visible, I did not get the error. I rearranged my code to make sure I updated the button configurations (hidden: false) before I did the cell.expand(), and I haven’t received the error anymore. So it seems like it fails if there’s no visible content (or data for DataCollection objects) to show in the widget.

I don’t know if this applies to your situation with the grid or not, but I’m hoping it at least helps lead to a revelation or resolution.

1 Like

Thank you kcasarez. I appreciate your thoughts. I started looking at my code through the ‘lens’ you’ve provided. I will provide an update within the next day. Again, I thank you for the insights.

For anyone running into a similar issue with the DHX components: I pursued the idea presented by ‘kcasarez’ and that led me to a better understanding of what was causing the error. While my project is different than he described, it did send me the right direction. I was able to build a (complex) snippet and a DHX engineer provided the solution with:

The main logic due to the virtual DOM structure of the dhx components is not to initialize the components to the hidden containers and try not to operate with the components while they are hidden or collapsed, as they are not located on the page at that time and it may lead to components incorrect sizing or some errors. In some specific or complex solutions always can appear some additional issues, as it is not available to predict all the use cases.

In essence, even though the component I was writing to was not ‘hidden’, the layer that contained the component was hidden. By reordering the sequence of events the error disappeared.

I hope this helps others who run into a similar problem.

3 Likes

this virtual dom is a joke. The whole suite 7 is a joke. the most stupid thing to do is to remove the dom and lose state!

RUN AWAY FROM THIS LIBRARY!!!