Bryntum grid - treegrid component- same component use multiple times on a single page.

[peachaws]

Hello team,

I'm currently using Bryntum grid version 5.4.0 with JavaScript implementation, and I have integrated it as a component in my Vue.js page. I have set the props for grid columns, data, and features.

Currently, we are utilizing a Bryntum Tree in Vue by creating components. We place that component on the same page four times, each with a different tree group. We have implemented an "Expand All" and "Collapse All" button in the header section. However, when we click the button for the first grid, the action is applied to the last rendered grid instead of the intended one. How can we address this issue? We want the "Expand All" and "Collapse All" actions to be specific to each grid.

Moreover, we would like to use a similar approach with the bryntum grid without a tree feature.

I am attaching the sample video, a component, and a vue page for your reference.

[sergey.maltsev]

Hi!

You have grid variable initialized once globally for all grids.

let grid; //define the grid variable here to initialize it later
export default {

then you assign it inside

    createGrid() {
      ...
      grid = new TreeGrid({

collapseAllButton uses it for action.

          {
            type: "button",
            ref: "collapseAllButton",
            icon: "b-fa b-fa-angle-double-up",
            tooltip: "Collapse all",
            onAction: () => grid.collapseAll(),
          },

So grid will refer to the latest grid after creating 4 grids.
This is the reason.

Try using local grid variable inside createGrid()

[peachaws]

Hi!

You have grid variable initialized once globally for all grids.

let grid; //define the grid variable here to initialize it later
export default {

then you assign it inside

    createGrid() {
      ...
      grid = new TreeGrid({

collapseAllButton uses it for action.

          {
            type: "button",
            ref: "collapseAllButton",
            icon: "b-fa b-fa-angle-double-up",
            tooltip: "Collapse all",
            onAction: () => grid.collapseAll(),
          },

So grid will refer to the latest grid after creating 4 grids.
This is the reason.

Try using local grid variable inside createGrid()

Hello,

Thanks for your reply. Do you want us to code something like the below or do we need to define the data variable in vue? Moreover, we have tried doing the data variable approach but it was unable to load the big data (thousands and lacs of records) as we were using 'this' to access that variable which was pointing to the vue instance instead of Grid. I'm attaching the file with the changes you have suggested, also, this is the post reference for you that we used earlier. viewtopic.php?t=26452
inside grid method

const gridContainer = this.$refs.gridContainer;
    let  grid = new TreeGrid({
        appendTo: gridContainer,
        features: {
     .....other configs....
});

data property

  data() {
    return {
      grid: null
    };
  },

[sergey.maltsev]

Hi!

In vue we recommend using Bryntum wrapper components according to this guide.
You can use vue refs to access each grid after.

Using

new TreeGrid({...});

is not actually a vue approach to build application.

Please check guides here
https://bryntum.com/products/grid/docs/guide/Grid/quick-start/vue-3
https://bryntum.com/products/grid/docs/guide/Grid/integration/vue/guide

We have demos which can be found here
https://bryntum.com/products/grid/docs/guide/Grid/download

Please check before building your own application.

[peachaws]

Hi!

In vue we recommend using Bryntum wrapper components according to this guide.
You can use vue refs to access each grid after.

Using

new TreeGrid({...});

is not actually a vue approach to build application.

Please check guides here
https://bryntum.com/products/grid/docs/guide/Grid/quick-start/vue-3
https://bryntum.com/products/grid/docs/guide/Grid/integration/vue/guide

We have demos which can be found here
https://bryntum.com/products/grid/docs/guide/Grid/download

Please check before building your own application.

Hi, thanks for your reply.
We are doing fine with other configurations and features of the existing implementation.
Does the vue implementation of the bryntum grid support all the vanilla JS examples as shown on your website?

[sergey.maltsev]

Hi!

You can download all examples source code we have online via the link I gave you above.
Not all vanilla examples are already ported to Vue but it is pretty simple to do it.

[peachaws]

Hi!

You can download all examples source code we have online via the link I gave you above.
Not all vanilla examples are already ported to Vue but it is pretty simple to do it.

Hi,

Thank you for your response. I understand your point. Suppose we have installed the dependency "@bryntum/grid-vue: ⁵.6.5," would it be able to handle all the vanilla JS examples shown in the example section of the Bryntum grid? We have implemented a simple grid with a filter bar and sorting, which worked well for us. However, I am unsure if it will work for more complex examples like handling big data and implementing tree grouping, rowExpander, and nested grid concepts using Vue.

[sergey.maltsev]

Hi!

@bryntum/grid-vue wrapper package supports all public methods, configs, properties and features of the component which you can find here in docs.
https://bryntum.com/products/grid/docs/

You may see Vanilla example code as a template for configuring your vue component.