Angular-gridster2: Removing GridItem while dragging it throws an Error

[JohnxAss]

Dear developers,
if you try to remove a GridItem via a button inside the GridItem it throws an error:
_ERROR TypeError: Cannot set property 'movingItem' of undefined_

This only happens in the Angular5 version of gridster2.

To prevent this , I changed in gridsterDraggable.service.js at line 106:

 setTimeout(function () {
            this.Gridster.movingItem = null;
            this.Gridster.previewStyle();
    }.bind(this));

To this:
this.tmpGridster = this.gridster; setTimeout(function () { this.tmpGridster.movingItem = null; this.tmpGridster.previewStyle(); delete tmpGridster; }.bind(this));
This worked for me.

Kind regards
John

[tiberiuzuld]

Hi @JohnxAss ,
You have two options:

1. Stop propagation of mousedown $event

removeItem($event, item) {
    $event.preventDefault();
    $event.stopPropagation();
    this.dashboard.splice(this.dashboard.indexOf(item), 1);
  }

1. Include the button in a div with class gridster-item-content

 <gridster-item [item]="item" *ngFor="let item of dashboard">
<div class="gridster-item-content">
<button mat-icon-button mat-raised-button class="remove-button"     
                  (click)="removeItem($event, item)"
                  (touchstart)="removeItem($event, item)" matTooltip="Remove">
            <mat-icon>delete</mat-icon>
          </button>
</div>
</gridster-item>

Let me know if this solves your issue.

Thanks

[JohnxAss]

Thanks a lot, the second option is exactly what I was looking for. I totally missed the whole "gridster-item-content" thing.

By the way, Gridster2 is great.

Kind regards
John

[tiberiuzuld]

Glad it worked out.

Thanks

[Estevete]

@tiberiuzuld is there any way to not remove item if is dragging? like while(!onDragging) { .... }

[ElisePatrikainen]

gridster-item-content works like a charm - thanks !