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
};
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
Most helpful comment
I'm experiencing the same issue myself.