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" />
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
Screenshot 2024-10-01 at 5.20.05 PM.png (369.37 KiB) Viewed 210 times
I hope this will clear your query. Looking forward for your support.
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",
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.
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.
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 (191.42 KiB) Viewed 131 times
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.
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.