moveAll helper for dual-grid handling

[drzraf]

Subject of the issue

When dealing with multiple grids, removeAll() is not suitable with widget-based grids.

Your environment

• version of gridstack.js: 0.5
• which browser and its version: FF 6x

Steps to reproduce

Multiple grids handling with widgets is good. But coupling with save/load we soon hit an issue if we want a reset. The two demo avoids because there is no such thing like "reference/default grid".
In my case, instead of removeAll() I'm looking into moving back all widgets to #grid1 so we can start filling grid2 again.

• A pure "items" based version does not fit since it'd loose the individual DOM elements.
• (side topic) I thought about doing that, but couldn't find an actual way to extends core GridStack methods.

    $(function () {
        GridStack.prototype.moveAll = function(new_grid) {
            this.grid.nodes.forEach(function(node) {
                new_grid.data('gridstack').addWidget(node.el);
                this.removeWidget(node.el, /* detachNode */ false);
            }, this);
            this.grid.nodes = [];
            this._updateContainerHeight();
        };
    });

• I'm currently using removed event:

$("#grid2").data("gridstack").on('removed', function(event, items) {
   for (var o of items) {
       $('#grid1').data('gridstack').addWidget(o.el);
    }

The latest is somehow working but it's not very robust (the event is not fire under some conditions) and think API could ease that common use-case.

[adumesny]

@drzraf thanks for the code sample, surprised you're not able to extend gridstack (before initializing the grids?). Maybe others can chime in

Wondering how common it really is to move all items from one grid to another really? also if the grids have different column numbers, things can get tricky, so adding this as a blessed API to support might not be right thing.

[drzraf]

Dual-grid of different column numbers is needed a difficulty I'm experiencing.
About extending gridstack.js "the-right-way", that would be interesting to get some documentation about how. (Yes I tried before initializing but the GridStack object is not available)

[adumesny]

sorry for not getting back. You can extend using this:

$(function () {
  // extend gridstack with our own custom method
  window.GridStackUI.prototype.printCount = function() {
    console.log('grid has ' + this.grid.nodes.length + ' items');
  };

  $('.grid-stack').gridstack();

  // you can now call on any grid this...
  $('.grid-stack').data('gridstack').printCount();
 });

not adding this to core lib as seem very specific. Closing

[drzraf]

Thank you, I'll try that!
In the meantime, I'm pretty sure example making use of moveAll between two grids (of different sizes :)) would be a tremendously useful codebase to get inspiration from.