Our blazing fast Grid component built with pure JavaScript


Post by lcgreen »

Hi I have been attempting to add Vue components to our grid component but have encountered an error doing so. I can recreate the issue within the vue-3 vue-render demo by changing the source code to use a store, as this is very similar to our setup.

The Vue columns are blank, and an error occurs in the console:

	// ../Bryntum Grid Trial/grid-5.6.6-trial/examples/frameworks/vue-3/javascript/vue-renderer
	// src/App.vue
	...
        const gridConfig = reactive(useGridConfig());
        const store = reactive(new Store({
            data: [],
            autoCommit: true
        }));

    const clickHandler = (html, color) => {
        Toast.show({ html, color, timeout : 3000 });
    };

    onMounted(() => {
        store.data = DataGenerator.generateData(5);
    })
    ...

The following error occurs:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'set')
    at eval (WrapperHelperVue3.js:69:1)

Please can someone help resolve this, as it seems like an actual bug?

Attachments
Capture-2024-02-20-141657.png
Capture-2024-02-20-141657.png (109.85 KiB) Viewed 169 times

Post by ghulam.ghous »

Hi Icgreen,

I tried your code in our demo and there is no error and column is correctly rendered. Can you please provide us the complete test case where you are able to repro this issue? I have tried in version 5.6.6 (same version which is being used in online examples). I am uploading a clip and demo code here so you can see if there's any difference.

Clip Link: https://drive.google.com/drive/folders/1GiBJJC6GW9ceaXBgnx-BPjH6EV5HjzVg?usp=sharing

vue-renderer.zip
(349.37 KiB) Downloaded 21 times

Please provide us more details so we can repro this issue. Probably you can review this demo and any other config to that could help us to repro this issue.

Regards,
Ghous


Post by lcgreen »

Thanks for coming back to me so quickly, I have attached the demo with my changes, and the issue I am having.

Your project was not exporting the store and you still had the gridConfig initialising with demo data, which is why your demo still seemed to be working correctly.

Attachments
vue-renderer-error.zip
(247.68 KiB) Downloaded 18 times

Post by ghulam.ghous »

Hi there,

Thanks for sharing the test case. I was able to reproduce the issue in 5.6.6. But when I tried it in the latest release branch, the issue is already fixed. Probably it is fixed by this ticket https://github.com/bryntum/support/issues/8454/. The fix will be available in the release patch 5.6.7 that we are planning to release this week. For now if you want to avoid the issue, as a workaround please use any of the following two methods:

//Either initiate the store data with null instead of []
data       :  null

// or pass the data initially creating store and remove onMounted part.
data       :  DataGenerator.generateData(5)

Regards,
Ghous


Post by lcgreen »

I have tried using 5.6.7 but I still experience the same issue when trying to clear and load new data, only this time the error message is different. I have attached the source code, clicking the button below the grid displays the following error.

It also did not work when initialising with an empty array. It seems displaying is correct though when initialising with null, however there are issues when clearing the table and the Vue component not reinitialising

Cannot read properties of undefined (reading 'delete')
TypeError: Cannot read properties of undefined (reading 'delete')
    at Proxy.processCellContent (webpack-internal:///./node_modules/@bryntum/grid-vue-3/src/WrapperHelperVue3.js:58:27)
    at Proxy.renderCell (webpack-internal:///./node_modules/@bryntum/grid/grid.module.js:28154:3176)
    at Proxy.render (webpack-internal:///./node_modules/@bryntum/grid/grid.module.js:28145:739)
    at Proxy.renderFromRow (webpack-internal:///./node_modules/@bryntum/grid/grid.module.js:28416:963)
    at Proxy.refresh (webpack-internal:///./node_modules/@bryntum/grid/grid.module.js:28430:122)
    at Proxy.refreshRows (webpack-internal:///./node_modules/@bryntum/grid/grid.module.js:30326:200)
    at Proxy.resumeRefresh (webpack-internal:///./node_modules/@bryntum/grid/grid.module.js:30338:837)
    at Proxy.internalOnStoreEndApplyChangeset (webpack-internal:///./node_modules/@bryntum/grid/grid.module.js:30176:391)
    at Proxy.trigger (webpack-internal:///./node_modules/@bryntum/grid/grid.module.js:2318:2999)
    at Proxy.syncDataset (webpack-internal:///./node_modules/@bryntum/grid/grid.module.js:9838:2088)
Attachments
vue-renderer.zip
(252.1 KiB) Downloaded 16 times

Post by ghulam.ghous »

Hi lcgreen,

I have checked again and the issue was that you have defined the store inside setup and it was reactive to changes. We do not expect our components to be reactive on each render. So I have moved the store to config and added updated the way of updating data. It will work with [] as well as null value. You can use either. Hopefully it meets your use case.

vue-renderer 2.zip
(252.57 KiB) Downloaded 23 times

Regards,
Ghous


Post Reply