When using AjaxStore Grid with Vue.js 3 + Nuxtjs 3 Bryntum grid
Git issue https://github.com/bryntum/support/issues/8788
"@bryntum/grid": "5.6.8",
"@bryntum/grid-vue-3": "5.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
TypeError: Cannot read properties of undefined (reading 'dataset')
at Proxy.processCellContent (http://localhost:3000/_nuxt/node_modules/@bryntum/grid-vue-3/src/WrapperHelperVue3.js?v=a0350e9d:52:38)
at Proxy.renderCell (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:94800:60)
at Proxy.render (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:94655:17)
at Proxy.renderFromRow (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:95802:11)
at Proxy.refresh (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:95867:8)
at Proxy.refreshRows (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:103605:18)
at Proxy.resumeRefresh (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:103697:14)
at Proxy.internalOnStoreEndApplyChangeset (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:102960:10)
at Proxy.trigger (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:5064:34)
at Proxy.syncDataset (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:28184:8)
And when the user hits a second character this error
TypeError: 'get' on proxy: property 'parser' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<NumberParser>' but got '#<NumberParser>')
at Proxy.parse (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:20878:41)
at Proxy.changeValue (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:66566:58)
at Proxy.set (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:1628:44)
at Reflect.set (<anonymous>)
at MutableReactiveHandler.set (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-DSIC5XJC.js?v=a0350e9d:1517:32)
at Proxy.updateColumnFilterFields (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:83763:25)
at Proxy.onStoreFilter (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:83877:12)
at Proxy.trigger (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:5064:34)
at Proxy.triggerFilterEvent (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:24876:12)
at Proxy.afterPerformFilter (http://localhost:3000/_nuxt/node_modules/@bryntum/grid/grid.module.js?v=a0350e9d:24871:14)
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
});
});
}
}
}