Our blazing fast Grid component built with pure JavaScript


Post by trudog »

Started evaluating Bryntum yesterday by integrating the Grid component into a Quasar-based, Vue3 application, specifically the Vue3 cell-renderer demo (https://www.bryntum.com/examples/grid/frameworks/vue-3/javascript/vue-renderer/dist/). The page rendered fine, but we immediately noticed scrolling issues.

The page loads as expected, but when we scroll down and then back up, there are missing rows and errors in the console log. Attached are screenshots of the initial loaded page, the page after scroll down, and the page after scrolling back to top. We uploaded the project that demonstrates this behavior GitHub:

https://github.com/nethopper2/bryntum

Any thoughts as to the root cause, whether a bug in the Grid component or our implementation, would be appreciated.

Many thanks!

Attachments
Page after scrolling down and then back up
Page after scrolling down and then back up
scrolled-down-then-up.jpg (265.61 KiB) Viewed 378 times
Page after scrolling down
Page after scrolling down
scrolled-down.jpg (267.43 KiB) Viewed 378 times
Page after initial load
Page after initial load
initial-page-load.jpg (238.11 KiB) Viewed 378 times

Post by marcio »

Hey

It looks like something specific with the Vue version of the Grid, and could be something related to Quasar. I created a ticket for our team to check it and fix it as soon as possible. https://github.com/bryntum/support/issues/4879

Thanks for your report.

Best regards,
Márcio


Post by saki »

The problem is that the processCellContent method in the wrapper does not get the expected value(s). It is related to refs that are created by teleports (which implement the Vue component-in-cell support).

Is it possible that some of your config/setup can cause that the ref is an array instead of the expected scalar value? Also, does Quasar support teleports exactly same way as Vue 3? If there would be a difference and these unexpected array would be caused by Quasar, you could still use custom elements returned from column renderer.

Screen Shot 2022-07-01 at 12.03.12.png
Screen Shot 2022-07-01 at 12.03.12.png (1.17 MiB) Viewed 361 times

Post by trudog »

We removed Quasar from the equation by creating a new Vue3 project with the same, unmodified Grid demo, and it breaks the same way.

While investigating the problem, we went to WrapperHelperVue3.js and inserted this code:

// Find cached teleport
let cached = refs[key];

// added this array check
if (Array.isArray(cached)) {
    cached = cached[0]
}

// Check if record changed
if (cached && cached.$el.dataset.generation !== String(record.generation)) {
    teleports.delete(key);
    cached = null;
}

With this code and restarting the dev server, the scrolling issues goes away. Not sure if this is the proper or complete way to resolve the core problem, but providing our test steps and results.

Pull the changes from the Git repo (https://github.com/nethopper2/bryntum) and you will see two project folders: quasar with the original application and vuecli with the vanilla Vue3 application.

This appears to be an issue with Grid component, agreed? Can you reproduce this?


Post by shawn »

subscribing


Post by saki »

Thank you for the information. I'll investigate what's really happening because our Vue 3 demo works. FYI, I was also thinking about the code you added but before adding it I would like to understand why it is needed now and was not needed before. Stay tuned.


Post by saki »

So the result is that the array check must be there because if I run our demo against Vue 3.2.37 (latest as of now) then it also crashes. I have implemented the fix virtually the same way as you did above and it will be released in the next version. See https://github.com/bryntum/support/issues/4879

Thank you very much for reporting it.


Post Reply