Gridstack.js: On Removed never called

[RobertoBiundo]

I have this

var options = {
                cellHeight: 200,
                width: 5,
                height: 4,
                verticalMargin: 4,
                float: true,
                removable: '.remove-area',
                removeTimeout: 100
            };
            $('.grid-stack').gridstack(options);

that initialises the grid the way i want it...fine...
I have an div with a class .remove-area
the drag and drop to remove procedure is working, if i drag a widget it gets removed, but...

if i do this (as described in the docs)

$('.grid-stack').on('removed', function(event, items) {
                console.log(items);
            });

this function never gets called.
Any ideas?

[kyleroberthammond]

Same problem here.

[kyleroberthammond]

You can bind a jquery remove event on the child elements.

e.g $(".grid-stack-item").on("remove",function(){
console.log(this)
})

something like that should do the trick. If you are referencing it to a object just assign a id on each element. Which you can do with the addWidget function (last param), and then use jquery's attr function to compare.

[MarkoIvanetic]

I did a nasty workaround, tweaked onEndMoving() in the gridstack.js

 if (node._isAboutToRemove) {
                forceNotify = true;
                el.removeData('_gridstack_node');
                el.trigger('widget-removed') // My line
                el.remove();
            }

and then

        $('.grid-stack').on('widget-removed', '.grid-stack-item', function() {
            console.log($(this));
        });

That way it works on dynamic items

[RodgerLai]

@MarkoIvanetic It's working,thank you ~~~~,so that i can get the data-gs-id and do my operating

[RobertoBiundo]

@MarkoIvanetic Nice solution, i allowed me to find the problem.
.remove() in jquery doesn't trigger the .on("remove") event. you have to explicitly call .trigger('remove')

You don't need to create a new trigger. you just need to use the existing one like this.

if (node._isAboutToRemove) { forceNotify = true; el.removeData('_gridstack_node'); el.trigger('remove').remove(); }

and then in your code do this
$('.grid-stack').on('remove', '.grid-stack-item', function() { console.log($(this)); });

This fixes the problem without adding a new trigger. I'm going to create a pull request for this and hopefully it will be included in the next version. The fact is that i want to use this trough a cdn and don't want to host the custom .js locally. But for now it will do.
Thank you for your help.

[RodgerLai]

@RobertoBiundo good job man. without creating new trigger.

[MarkoIvanetic]

Still now that it's modified i cant use it with bower.

[kyleroberthammond]

Thanks this is a better solution :).

[RobertoBiundo]

Just to let you guys know that i already created a pull request and hopefully this will be included soon and @MarkoIvanetic can start using it with bower.
https://github.com/troolee/gridstack.js/pull/622

[radiolips]

Fixed in develop branch. Will go live in v0.3.0 later today.