Angular-gridster2: Question: Notify Gridster that the size of a widget changed programatically

[NoMercy235]

Hello!

I want to change the size of a widget programatically and update the Gridster element in order to reflect these changes.. I have changed the rows and cols properties, but Gridster doesn't seem to take them into account at all. I have tried the options.api.resize() method, but that only works for the Gridster element itself, not its items. Is there any way to let Gridster know that the size of a widget has been modified in another way than the interface resize?

Thanks!

[tiberiuzuld]

Call this.options.api.optionsChanged();

[NoMercy235]

Ah, was just looking through the code and found this:

optionsChanged(): void {
  this.setOptions();
  let widgetsIndex: number = this.grid.length - 1, widget: GridsterItemComponent;
  for (; widgetsIndex >= 0; widgetsIndex--) {
    widget = this.grid[widgetsIndex];
    widget.updateOptions();
  }
  this.calculateLayout();
}

Which answers my question. :D Thanks for answeing!

[NoMercy235]

Actually, I have another question. When changing the rows and cols properties, if the widget gets bigger, is there any way to make the other widgets which intersect with it find a new position? Or do I have to go through each of them, check if they are within the bounds of the one that got resized and then use the GridsterPush to push each of them in another direction?

[tiberiuzuld]

You can use this.options.api.getNextPossiblePosition(item: GridsterItem) or GridsterPush with the item you changed.

[NoMercy235]

I tried the following:

• Iterate through all widgets except the one that had its size changed, let's call it widget A. If one widget intersects with widget A, use the getNextPossiblePosition method to find another place for it. After passing through all widgets, if there was at least one collision, repeat the steps until there is none found (because some widgets might end up overlapping when using getNextPossiblePosition). However, I think I need to schedule a redraw of the gridster afterward. Using the change detector's markForCheck() didn't help either.

• Use the GridsterPushResize service like this:

const gridsterPush = new GridsterPushResize(gridsterItem);             
gridsterPush.pushItems(gridsterPush.fromNorth); // I am always resizing south
gridsterPush.setPushedItems();
gridsterPush.restoreItems();
gridsterPush.checkPushBack();

Because this seemed to be better in my case, rather than GridsterPush service. However, it didn't update the gridster.

Example:

• This is the initial layout:
  https://ibb.co/kf99wm

• The user can do some action to hide that chart. If I do that for the first widget (top-left), it ends like this:
  https://ibb.co/cKZyp6
  Which is fine. The grid is anchored topleft and the widgets move automatically.

• When the user decides that the chart should appear again, I end up with this layout:
  https://ibb.co/eAuL2R

• If I use GridsterPush service instead, I end up with this layout:
  https://ibb.co/kzEW96
  (the rest of the widgets are not visible on the screen). Which is kind of the behavior I want, but I want widget A to remain in place, not somewhere random.

I don't know why the auto-move thingy happens when the widget gets smaller, but not when it gets larger. Do you have any idea?

[NoMercy235]

Update!

Iterate through all widgets except the one that had its size changed, let's call it widget A. If one widget intersects with widget A, use the getNextPossiblePosition method to find another place for it. After passing through all widgets, if there was at least one collision, repeat the steps until there is none found (because some widgets might end up overlapping when using getNextPossiblePosition). However, I think I need to schedule a redraw of the gridster afterward. Using the change detector's markForCheck() didn't help either.

This worked after all. But I need to call getNextPossiblePosition multiple times during the same change detection cycle and the method always will return the same possible position, since it doesn't know that something occupies it right now.

[tiberiuzuld]

After each getNextPossiblePosition you need to call api.optionsChanged() I think.

[tiberiuzuld]

About push you can read here and here on how to use.
To push the items back up you can use option: compactUp

[NoMercy235]

After each getNextPossiblePosition you need to call api.optionsChanged() I think.

This was what fixed the issue for me. Thanks!

[shyambhiogade]

@NoMercy235 can you place your code here, i am also in the same situation where i increase the row and column and not sure how to fix it.

[NoMercy235]

Hello @shyambhiogade ! I cannot do that, unfortunately, as it is very complex and most of it has nothing to do with this library. I suggest you make a minimal example of your problem and we can try to help. What is it you're trying to achieve? As @tiberiuzuld said, if you change the grid's properties from your code, you can't rely on Angular to trigger the change detection and update your component and you'll have to call api.optionsChanged().