Programatically set width/height of GridItems

[pxljoy]

Hey.

For example, can we set the GridItem's width + 1 and it work as if we were resizing? I have the code:

...
data () {
    return {
      layout: [
            {"x":0,"y":0,"w":4,"h":2,"i":"0"},
  	    {"x":2,"y":0,"w":2,"h":4,"i":"1"},
  	    {"x":4,"y":0,"w":2,"h":5,"i":"2"},
  	    {"x":6,"y":0,"w":2,"h":3,"i":"3"},
  	    {"x":8,"y":0,"w":2,"h":3,"i":"4"}
      ],
      cols: 12
    }
  },
methods: {
    enlarge: function(index) {
      this.layout = this.layout.map((g, i)=>{
        if(i === index) {
          //Increase the width of the grid item by 1 at the index given
          return {...g, w: g.w + 1}
        } else {
          return g
        }
      });
    }
  }
...

When I increase it, it works the first time, but if I click the button again it keeps increasing and wont push any other grid items accordingly.

[gmsa]

I don't see why should that be allowed if you already can resize items with drag resize.

[pxljoy]

This is similar to my use case. I need to increase the width and minimum width of the component on demand.

If you have any other suggestions tell me 😄

[gmsa]

Is the add button on that image increasing the height of the item? Or is the item increasing its height dinamically?

[pxljoy]

It is increasing the 'h' key in the layout dynamically. i.e:

layout.map((item, index)=>{
     return (index === 1) ? {...item, h: item.h + 1} : item
})

as you can see in the gif, the first time it renders fine, but after that it bugs out.

[gmsa]

Can you setup a sample project ou a jsfiddle so that I can test it out?

[pxljoy]

@gmsa here you go: https://jsfiddle.net/pxljoyio/orrqnavn/

Sorry it took so long, I've never dabbled with JSFiddle much haha

[gmsa]

Thanks, I'll take a look when I have some free time.

[SergeyKhval]

@pxljoy I managed to solve this by triggering resizeEvent on gridLayout

see updated fiddle here

[rtucek]

Thx for the hint with the ref and resizeend event. In case it doesn't work for anyone that way (like for me), you have to wait until the child component gets re-rendered via $nextTick:

this.$nextTick(() => {
    this.$refs
        .gridLayout
        .resizeEvent(
            'resizeend',
            newItem.i,
            newItem.x,
            newItem.y,
            newItem.h,
            newItem.w
        );
});

[JimmyLv]

@SergeyKhval Hi, could you pls post the fiddle code in here because I can't open that link.

[higin0]

I had a similar problem. I wanted the height of the grid item to reflect the amount of items on an array. By attributing a value to the item.h the item would update but become hidden behind others as the grid would not update.

To solve this I used Vue.set(object, index, value) method. Considering the object as my array of grid-items, I determined the index with a filter by item.i and the value as the updated grid-item, with the new height property.

//updating the h of the item
this.myList.items[index].h = newH
//setting the array with the new object
this.$set(this.myList.items, index, this.myList.items[index]);

And this made the grid react to the change and update itself.

[zzl81cn]

see this https://github.com/jbaysolutions/vue-grid-layout/issues/73 his ex: https://codepen.io/gusy/pen/jQVrGz