Model not updated when an element is added by dragging

[abhinavsayan]

When a widget is added by dragging from outside, it is not updated in the model. The model continues to track the old elements that were added to it. Due to this I am unable to get the reference to the newly added widget. Is there any workaround to get the widget reference after it was added by dragging?

[inanbayram]

@abhinavsayan Did you find a solution for that? I have also the same problem :(

[spreston077]

@abhinavsayan Did you find a solution to this?

[abhinavsayan]

HI, I used the following workaround :

1. I applied a class ('.draggable-widget') to the items that can be dragged into the grid
2. Once an item is added, the onChange event is triggered
3. In the onChange event, I found the 1st element of the said class ('.draggable-widget')
4. Copy any details (if you need), add it to an object and delete the element

         var newItem = $('#report-canvas').children('draggable-widget')[0]; 
         var _grd = $('#report-canvas').data('gridstack');
        _grd.removeWidget(newItem);

5. Any required attributes can be copied before deleting and then add the widget by pushing the object into the model

[spreston077]

@abhinavsayan excellent, thank you!

[dhagan]

Hi Folks,

I am struggling with two gridstacks - removing and adding.

The lastest gridstack.js v 1.0.0 exposes the 'added' event among other fixes.

Keeping the angular $scope.widgets - repeat array - in sync with the gridstack-items is proving to be problematic.

on 'added' and following @abhinavsayan 's guidance, I am able to call removeWidget() - which works well, but the push and splice to the $scope.widgets triggers and additional 'added' and or 'remove'.

Here is the rough approach - on('added')

1. check to see if the item._id is null
2. make a copy of the removed widget
3. if it is, then remove the widget items[0]._grid.removeWidget(items[0].el)
4. then push to the repeat bound array $scope.widgets

I am also able to capture the remove event from the source grid, but removing it from using splice - triggers another set of remove events.

Another issues is that for both removed and added the id is undefined or null and therefor the src id of t gridstack-item object is not known.

In angular, is there a way to suppress the binding events on when I push and splice?

I have forked this project - https://github.com/dhagan/gridstack-angular/blob/master/demo/two.html for details.

I think it may be time to consider a different approach, I feel like I am thinking about this all wrong.

[dhagan]

Folks, Got a two column add/remove working more to my liking. It is not generalized for many columns. Feels very hacky. Would love some input, but perhaps all the cool kids are on angular 2-3-4++