Our blazing fast Grid component built with pure JavaScript


Post by peachaws »

Hello Team,

We are using the bryntum grid version 5.6.10 with vue2.

Now, we are migrating our grids to vue3, we need your help to set up the grid with vue 3. We have been using the $ref to access the grid and other configurations.

Given below is the sample code of accessing grid.

import { BryntumGrid } from "@bryntum/grid-vue";
import { AjaxHelper, CollectionFilter } from "@bryntum/grid";
<bryntum-grid ref="childGrid" :config="gridConfig" />

accessing and using the grid like shown below.

this.$refs.childGrid.gridInstance
this.$refs.childGrid.gridInstance.features
this.$refs.childGrid.gridInstance._store.load();

We have implemented all grids like this, could you please guide us so that we don't have to make more changes inorder to migrate bryntum grid to vue3.

Many thanks!


Post by tasnim »

Hi,

Could you please explain about what problems you're facing with migrating?

By the way, instead of this this.$refs.childGrid.gridInstance._store.load(); you should use this.$refs.childGrid.gridInstance.store.load();


Post by peachaws »

tasnim wrote: Tue Oct 01, 2024 1:45 pm

Hi,

Could you please explain about what problems you're facing with migrating?

By the way, instead of this this.$refs.childGrid.gridInstance._store.load(); you should use this.$refs.childGrid.gridInstance.store.load();

Hi Tasnim,

We also tried accessing this.$refs.childGrid.gridInstance.store.load(); this way, but we had no luck.

To adhere, we are using the core UI for the frontend and using bryntum along with that.

When accessing the $refs from a page like console.log(this.$refs);, we get the this.$refs.childGrid, which shows the console as shown in the image.
It's giving a different format than it used to give when using vue2. See below image

bryntum ref
bryntum ref
Screenshot 2024-10-01 at 5.20.05 PM.png (369.37 KiB) Viewed 211 times

I hope this will clear your query. Looking forward for your support.


Post by tasnim »

Sorry, I forgot to share the docs https://bryntum.com/products/grid/docs/guide/Grid/integration/vue/guide#bryntum-grid-api-instance

Vue3 has a different approach of getting the grid instance.

Sample code snippet

<template>
    <bryntum-grid ref="grid" v-bind="gridConfig" />
</template>

<script>
// vue imports
import { ref, reactive } from 'vue';

// Bryntum Grid and its config
import { BryntumGrid } from '@bryntum/grid-vue-3';
import { useGridConfig } from './GridConfig';
import './components/ColorColumn.js';

// App
export default {
    name: 'App',

// local components
components: {
    BryntumGrid
},

setup() {
    const grid = ref(null);
    const gridConfig = reactive(useGridConfig());

    doSomething() {
        // Reference to Bryntum Grid instance
        const gridInstance = grid.value.instance.value;

        // NOTE: Do not use assignment to this.gridInstance
        // Vue will wrap Bryntum Grid instance with Proxy class
        // and this will not work as expected.
        // Refer to this Vue guide for the details:
        // https://vuejs.org/guide/extras/reactivity-in-depth.html
    }

    return {
        grid,
        gridConfig,
        doSomething
    };
},
};
</script>

<style lang="scss">
@import './App.scss';
</style>

Hope this helps.

If you're facing any other problems, please let us know.


Post by peachaws »

tasnim wrote: Tue Oct 01, 2024 2:20 pm

Sorry, I forgot to share the docs https://bryntum.com/products/grid/docs/guide/Grid/integration/vue/guide#bryntum-grid-api-instance

Vue3 has a different approach of getting the grid instance.

Sample code snippet

<template>
    <bryntum-grid ref="grid" v-bind="gridConfig" />
</template>

<script>
// vue imports
import { ref, reactive } from 'vue';

// Bryntum Grid and its config
import { BryntumGrid } from '@bryntum/grid-vue-3';
import { useGridConfig } from './GridConfig';
import './components/ColorColumn.js';

// App
export default {
    name: 'App',

// local components
components: {
    BryntumGrid
},

setup() {
    const grid = ref(null);
    const gridConfig = reactive(useGridConfig());

    doSomething() {
        // Reference to Bryntum Grid instance
        const gridInstance = grid.value.instance.value;

        // NOTE: Do not use assignment to this.gridInstance
        // Vue will wrap Bryntum Grid instance with Proxy class
        // and this will not work as expected.
        // Refer to this Vue guide for the details:
        // https://vuejs.org/guide/extras/reactivity-in-depth.html
    }

    return {
        grid,
        gridConfig,
        doSomething
    };
},
};
</script>

<style lang="scss">
@import './App.scss';
</style>

Hope this helps.

If you're facing any other problems, please let us know.

Hi Tasnim,

We have tried the approach you mentioned and I am attaching the sample file for your reference. We are unable to run it properly. What are we missing in it?
Below is the package.json text for bryntum. Tell us if we are missing anything to install.
"@bryntum/grid": "5.6.10",
"@bryntum/grid-vue": "5.6.10",
"@bryntum/grid-vue-3": "5.6.10",

Thank you!

Attachments
GettingStarted.zip
(2.31 KiB) Downloaded 3 times

Post by tasnim »

Thanks for sharing the file. But we'd need a runnable test case which we can run it locally and debug it. A test case will make it easier it easier for us to assist you. Please provide a runnable test case with package.json included and node_modules folder excluded so that we can reproduce it easily.

Best,
Tasnim


Post by peachaws »

tasnim wrote: Thu Oct 03, 2024 11:55 am

Thanks for sharing the file. But we'd need a runnable test case which we can run it locally and debug it. A test case will make it easier it easier for us to assist you. Please provide a runnable test case with package.json included and node_modules folder excluded so that we can reproduce it easily.

Best,
Tasnim

Hi,
We load the data from the laravel API call and then we bind it to the grid. We have tried replicating the similar steps shown in the example section https://bryntum.com/products/grid/examples/frameworks/vue-3-vite/paged/
If you can review the code file sent then it would be helpful for us, its working in the example due to static data but in general the data is not binding when API response returns. If you can check and provide us with a working example it would be a great help.

Thanks !


Post by marcio »

Hey peachaws,

As Tasmin mentioned, we would need a runnable test case for us to debug, as we see in your file external libraries that we would need to use in order to run your file.

I tried to adapt your code to our basic Vue 3 example and got it working, please check the attached sample project here.

Attachments
Screenshot 2024-10-03 at 18.53.22.png
Screenshot 2024-10-03 at 18.53.22.png (191.42 KiB) Viewed 132 times
basic example.zip
(14.31 KiB) Downloaded 5 times

Best regards,
Márcio


Post by peachaws »

marcio wrote: Thu Oct 03, 2024 11:54 pm

Hey peachaws,

As Tasmin mentioned, we would need a runnable test case for us to debug, as we see in your file external libraries that we would need to use in order to run your file.

I tried to adapt your code to our basic Vue 3 example and got it working, please check the attached sample project here.

Hi Team,

Your provided example is fine which is binding the static data on the page load itself. However, after making a small change to the example, it stopped working. We attempted to fetch data on 'Add FakeData' click, but it did not bind in the grid and the paging feature stopped working. Similarly, we are clicking the button and passing some parameters to the API, and when the API responds, the grid should be bound with the data and paging should be functional. We hope this information helps you understand our situation.

We have attached the sample code with modifications and a video for easy reference.

Screen Recording 2024-10-04 at 4.43.29 PM.mov
(1.99 MiB) Downloaded 5 times

Thank you!

Attachments
GettingStarted (1).zip
(2.08 KiB) Downloaded 3 times

Post by joakim.l »

Hi

I have watched your video and read the sample code.

I can't see anything in your sample code that actually reloads the store.
If it works as it seems, the store will load from the mocked URL on creation. And at that time the fakeData array is empty.

When you later add to the fakeData array. No call to store load is made. If you would call grid.store.load(), the data should probably be loaded.

Regards
Joakim


Post Reply