[VUE 3] AjaxStore - Filter Not working - column.vue=true

Tue Mar 12, 2024 2:27 pm

When using AjaxStore Grid with Vue.js 3 + Nuxtjs 3 Bryntum grid

Git issue https://github.com/bryntum/support/issues/8788

"@bryntum/grid": "⁵.6.8",
"@bryntum/grid-vue-3": "⁵.6.8",

The server its responding normally with the filter working but the bryntum its havings this errors

We are having this problem when the user hits one character

And when the user hits a second character this error

After this the bryntum stop working

After Hours and Hours of debug i think i found the source of this problem
This on the performFilter method where did you guys have a promise internalLoad

const result = await me.internalLoad({}, "", (event)=>{
                me.data = event.data;
                event = silent ? null : {
                    action: "filter",
                    filters,
                    oldCount,
                    records: me.storage.values
                };
                me.afterPerformFilter(event);
                me.trigger("refresh", event);
            }

on my tests the start of all errors its this part.

to reproduce this error just add on the columns the vue property as true to trigger this function on the
WrapperHelperVue3.js

function processCellContent({
        rendererData,
        rendererData: { record },
        rendererData: { cellElement },
        rendererData: { column },
        rendererHtml: cellContent
    }) {
        // Only run for cells with vue renderers
        if (column.data.vue) {
            const
                { vueComponent } = this,
                {
                    refs,
                    refs: { teleportsHolder }
                }                = vueComponent,
                // `teleports` is javascript Map object
                {
                    teleports: { value: teleports }
                }                = vueComponent.provides,
                key              = `${column.id}-${record.id}`,
                renderElement    = column.tree
                    ? cellElement.querySelector('.b-tree-cell-value')
                    : cellElement,
                // Move the previous teleport to the hidden div
                stale            = renderElement.querySelector('[data-vue]');

            if (stale) {
                teleportsHolder.appendChild(stale);
            }

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

            // Fix for new version of Vue (3.27) and #4879
            cached = Array.isArray(cached) ? cached[0] : cached;

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

            // Move cached back to the cell
            if (cached) {
                renderElement.appendChild(cached.$el);
            }
            else {
                // Teleport might have been deleted so let the DOM settle down
                nextTick(() => {
                    const bind = { ...cellContent };
                    const { is } = bind;
                    delete bind.is;

                    // Create new teleport
                    teleports.set(key, {
                        bind,
                        key,
                        is,
                        to         : renderElement,
                        generation : record.generation
                    });
                });
            }
        }
    }

Post by **ghulam.ghous** » Tue Mar 12, 2024 4:40 pm

Hi there,

Welcome to forums!

We have two filtering demos available online in vue3. Are you able to reproduce this issue in them?
https://bryntum.com/products/grid/examples/frameworks/vue-3/javascript/filterbar/dist/
https://bryntum.com/products/grid/examples/frameworks/vue-3-vite/filtering/dist/

If not, can you please share more details on how to reproduce this issue including a runnable test case. So we can reproduce this and see if this is a bug or something is wrong with your config, either way we will be able to assist you in a better way. You can see our guidelines about a test case here viewtopic.php?f=35&t=772.

Regards,
Ghous

Tue Mar 12, 2024 4:45 pm

I just add more details about the problem on the post.

Tue Mar 12, 2024 5:37 pm

follow a repository where you find the code to reproduce the error
https://github.com/guilherme-pinto-reeeliance/vue3-bryntum-filter-error

you can find a live version here: https://vue3-bryntum-filter-error.pages.dev/

the configuration file its this one

https://github.com/guilherme-pinto-reeeliance/vue3-bryntum-filter-error/blob/17a6230e4a01b455bfa03c0fed453adea20c1e20/app.vue

Post by **ghulam.ghous** » Wed Mar 20, 2024 5:00 pm

Hi there,

Apologies for the delayed response. I have created a ticket to further investigate and fix this issue https://github.com/bryntum/support/issues/8846. As you have mentioned, and I have confirmed that it is only happening when we vue: true config is used. I wonder why you have to use this config because we have demos available where custom Vue renderers are used and this config is not needed. Here's a demo: https://bryntum.com/products/grid/examples/frameworks/vue-3/javascript/vue-renderer/dist/. But in any case I have created a ticket where we will investigate this. For the time being, please try removing this config because I do not see a vue component being rendered in the test case and simple html will do the trick.

Regards,
Ghous

Wed Mar 20, 2024 8:40 pm

Hi @ghulam.ghous
So i need the render on my project for a custom Widget.
And just as an example to reproduce the error i made on this way to you guys can see the problem.
As simple having the vue as true the filter stop works.

Post by **ghulam.ghous** » Thu Mar 21, 2024 10:29 am

Hi there,

Well although setting vue: true without a renderer should not break anything but this does not make any sense when you are setting this config without a renderer. Because in our VueWrapper, we use vue: true config to check that a vue component is used. But in any case, this should not break anything and we have a ticket a where we will fix this issue. But for the time being, please remove this config where you are not using a vue component as a renderer. Another thing that I want to mention here is, that this issue does not have anything to do with the filter functionality.

Regards,
Ghous

Thu Mar 21, 2024 10:37 am

In fact when I remove this property and use redender the data simply disappears, because i try to render a vue component. and i only receive the error message when i try to make a filter.
Did you see this on the example ?
Its clear when you filter something you will receive an error, also if i remove the vue property on my production code the cells appears blank because they are not rendered at all.
https://vue3-bryntum-filter-error.pages.dev

And complementing the error, this only happens when I use Ajaxstore with the filter search directly on the server, if I use FakeAjaxStore this does not happen only when I do it as AjaxStore. Exactly as in the problem mentioned above

Thu Mar 21, 2024 10:42 am

And complementing the error, this only happens when I use Ajaxstore with the filter search directly on the server, if I use FakeAjaxStore this does not happen only when I do it as AjaxStore. Exactly as in the problem mentioned above

Post by **ghulam.ghous** » Thu Mar 21, 2024 10:59 am

Hi there,

And complementing the error, this only happens when I use Ajaxstore with the filter search directly on the server, if I use FakeAjaxStore this does not happen only when I do it as AjaxStore. Exactly as in the problem mentioned above

Not really. This error does not have anything to do with AjaxStore. Please see the attached project where this issue can be easily reproducible. Just edit a name column cell and press enter. Here's the clip: https://drive.google.com/drive/folders/1qFdJKnMS5Yni7xOPBHRVEc2jybfgjf-n?usp=sharing
Project example:

vue-renderer-issue-reproducible-without-ajaxstore-filter.zip: (344.8 KiB) Downloaded 23 times

And you can test it by removing the vue: true config from the column that it works as expected.

In fact when I remove this property and use redender the data simply disappears, because i try to render a vue component.

I don't understand what you are trying to achieve here. Because as I mentioned earlier, when you are using a vue component, you need to pass the vue: true but when you are not using a custom vue component in renderer, you do not need this config.

PS: I was not able to run your application with your server config, as it was throwing cors errors. I reproduced the issue with loading data from json object. You can find the modified object in the ticket.

Long story short, the error being thrown is a bug which needs to be handled because when passing vue: true without a custom vue renderer, we expect it to work and we will send a fix for it.

Regards,
Ghous

Support Forum

[VUE 3] AjaxStore - Filter Not working - column.vue=true