Angular-gridster2: Not updating on position change

Created on 16 Oct 2019  路  4Comments  路  Source: tiberiuzuld/angular-gridster2

Hi,
thanks for the wonderful project.
I've encountered an issue: I'm rendering my grid with an async pipe like this:
<gridster [options]="gridsterConfig" fxFlex> <gridster-item [item]="tile" *ngFor="let tile of (parsedTiles$ | async); trackBy: trackByFun"></gridster-item></gridster>

Each item has a precise position given by the API and translated to valid coordinates for Gridster. The problem is: when I delete a item my component recalculates the positions and the relative coordinates and then the observable changes. The issue is that right now even after the observable changes the grid actually does not rearrange itselft with the correct coords given. Why is that? Is there a way to force updating all the positions?

My configuration is like this:
this.gridsterConfig = { ...this.gridsterConfig, gridType: GridType.HorizontalFixed, displayGrid: DisplayGrid.None, pushItems: true, swap: true, swapWhileDragging: true, compactType: CompactType.CompactUpAndLeft, margin: GRID_MARGIN, draggable: { enabled: true, delayStart: 100 }, resizable: { enabled: false }, minRows: nRows, maxRows: nRows, maxCols: nCols, initCallback: this.gridOnInit.bind(this), disableScrollVertical: true, mobileBreakpoint: 0 };

Most helpful comment

I'm experiencing the same issue myself.

All 4 comments

I'm experiencing the same issue myself.

it can be related to "trackByFun".

I have the same problem. First I had Gridster with static items and it worked fine. But if I load the items via an observable into Gridster, there are problems with the positions. If I switch off trackby, it works, but I don't want to reload my whole template all the time if I only adjust one item.

Does anyone have a solution?

@Select(DeviceDashboardConfigState.getCurrentDeviceDashboard)
public widgets$: Observable<Array<GridsterItem>>;

public trackByWidgetId(index: number, widget: any): string {
  return widget.id;
}

<gridster-item class="gridster-item" [item]="widget" *ngFor="let widget of (widgets$ | async); trackBy: trackByWidgetId">

Workaround: #679

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tiberiuzuld picture tiberiuzuld  路  3Comments

aren5a picture aren5a  路  5Comments

jayoma picture jayoma  路  3Comments

dhaniksahni picture dhaniksahni  路  4Comments

samarsiraj picture samarsiraj  路  3Comments