Our blazing fast Grid component built with pure JavaScript


Post by dev_man_44 »

I try to implement Grid on Nuxt 3 project but getting error. I checked @bryntum/grid-vue-3 and also native @bryntum/grid/grid.module with setup API and it starts when I reload the page. But when I move to another page and come back I see this error:
Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
I checked that document.getElementById('mygrid') is null when I come from another route. Seems bryntum somehow clear the element itself.
Type: Bryntum Pro - Paid version
Versions:
"@bryntum/grid": "5.2.1",
"@bryntum/grid-vue-3": "5.2.1"

Implementation1 - Native:

<template>
  <div id="mygrid" ref="gridRef">grid here</div>
</template>
<script setup>
import { Grid } from '@bryntum/grid/grid.module'
let gridNew;
onMounted(() => {
  gridNew = new Grid({
    appendTo : "mygrid",
    height : 400,
    data : [
      { name : 'Dan Stevenson', city : 'Los Angeles' },
      { name : 'Talisha Babin', city : 'Paris' }
    ],
    columns : [
      { field : 'name', text : 'Name', width : 200 },
      { field : 'city', text : 'City', flex : 1 }
    ]
  });
})
</script>

Implementation 2- Vue-3:

<template>
  <ClientOnly>
    <bryntum-grid
        v-bind="gridConfig"
    />
  </ClientOnly>
</template>
<script setup>
import { BryntumGrid } from '@bryntum/grid-vue-3'

const gridConfig = {
  data : [
    { name : 'Dan Stevenson', city : 'Los Angeles' },
    { name : 'Talisha Babin', city : 'Paris' }
  ],
  columns : [
    { field : 'name', text : 'Name', width : 200 },
    { field : 'city', text : 'City', flex : 1 }
  ]
}

Also when I implement the vue-3 module I see dublicate registration error. Then change import { BryntumGrid } from '@bryntum/grid-vue-3' to import { Grid } from '@bryntum/grid' and then back to import { BryntumGrid } from '@bryntum/grid-vue-3' it works!
Need urgent help.

Attachments
dublicate_error.png
dublicate_error.png (57.79 KiB) Viewed 334 times
Screenshot at Nov 03 13-31-49.png
Screenshot at Nov 03 13-31-49.png (112.84 KiB) Viewed 334 times

Post by alex.l »

Hi dev_man_44,

Please attach a runnable test case with vue-3 implementation here, we will check what's wrong. It's hard to say by these code fragments, it works well in our vue-3 demos, so very possible something not so obvious happened.

All the best,
Alex


Post by dev_man_44 »

alex.l wrote: Thu Nov 03, 2022 1:49 pm

Hi dev_man_44,

Please attach a runnable test case with vue-3 implementation here, we will check what's wrong. It's hard to say by these code fragments, it works well in our vue-3 demos, so very possible something not so obvious happened.

It was hard to do online. Created minor repo to reproduce the error. Please clone this and see the console. I do not understand what is wrong.

https://github.com/Abdulla1995/bryntum-nuxt3

Post by alex.l »

Thank you for the test case. Looks like Nuxt using very specific syntax and not supported now by our bundles for Vue and Vue-3.
I've opened a feature request for dev team to investigate it https://github.com/bryntum/support/issues/5527

All the best,
Alex


Post Reply