а

DHX Grid not showing on Vue page


#1

Hi,

I’m trying to import grid and init into page, but no luck and looks like nothing happened.

My source:

https://pastebin.com/LSSS3e5Q

I have installed Treegrid, also tried and with dhx-grid:

npm i dhx-treegrid
npm i dhx-grid

What I seee by F12 developer that in mine container, created new div element and that’s it:

<div class="dhx_grid"></div>

Anyone can help, what I’m doing wrong?


#2

Please, make sure that the sizes of your grid container (div test) applied successfully on your page.
Note, that the sizes in percents will be applied only if the parent container (or the html body) has defined sizes.

If the problem still occurs for you please, provide a complete demo or a demo link, where the problem can be reproduced locally.


#3

Hi @sematik,

I provide full my source code what I have in pastebin. Just maybe explain a little bit what I done:

First installed package: npm i dhx-treegrid
Then imported into my vue page and in mounted() method trying to initialize this treegrid.

No errors, no nothing. Just don’t show grid at all. My container have a normal size:

Screenshot_3

And here how it’s look like after mounted() method:

Screenshot_4

My main container is: id=“estiminate”, I self not created dhx_grid div inside
After:
this.grid = new TreeGrid(“estiminate”, { … });

I’m tried to output into console: console.log(this.grid):

It’s look like that everything ok, but self grid it’s not showing.
Also I checked if styles are included, everything fine.

BUT, if I include library from CDN (taken from samples: https://docs.dhtmlx.com/suite/codebase/suite.js?v=6.1.0) and change:

new TreeGrid(‘estiminate’,{ … }) -> new dhx.TreeGrid(‘estiminate’,{ … });

Everything works fine

So, can be that something wrong with npm package?


#4

My apologies.

The problem is with the initialization of the treegrid without the data.
In the 6.1 we have extended this scenarion and now you are able to initialize the grid without the data (so the cdn works correctly)