After calling remove_all_widgets, then adding more widgets, I can't drag a widget where an old widget once was.

After calling remove_all_widgets(), then adding more widgets, I can’t drag a widget where an old widget once was.

For example, if I create a grid with 2 rows and 3 columns like so:

+-----+-----+----+
|  1  | 2  |  3 | 
+-----+-----+----+
|  4  | 5  |  6 | 
+-----+-----+----+

Then call remove_all_widgets(), then recreate the same grid as above, I can’t drag any widget onto another widget without getting the below errors (multiple times):

Uncaught TypeError: Cannot read property ‘row’ of undefined

I can however, move a widget below into, say “the third row”, onto 7, 8, and 9.

Thanks in advance for any help.

[parliament718]

@sniperwolfpk5 thanks for posting the fix. $('.gridster ul').empty() sufficed for me. The following “cleanup routine” seems to work the best:

gridster.remove_all_widgets();
gridster.destroy();
$('.gridster ul').empty();

[jvelezc]

1+ please fix it on the underlying library with @OscarEriksen fix.

If you invoke removeWidget(“#something”); Then right after invoke removeWidget(“#somethingelse”);

Then you try to add_widget(“#something”); You get the same error.

My work around:

  let svc = new GridSterService(); //TypeScript class I will not bore you with details but it gives me 
//the a gridster instance. 
  $('#vrxAddOpenPanel').click(() => {
            if (!$("#openPanel").length) {
                createOpenPanelWidget(svc);
                //Because there something broken with gridster I choose to invoke a jquery click event
                //https://github.com/ducksboard/gridster.js/issues/271
                //Which circumvents the issue all together.
                $("#vrxAddWelcomeMessageWidget").trigger("click");
            }
        });

Which triggers a jquery event to actually handle things properly instead of the javascript nonsense exception.

  $('#vrxAddWelcomeMessageWidget').click(() => {

            if (!$("#welcomeMessageWidget").length) {

                createWelcomeMessage(svc);
            }
        });

and to remove.

 $('#vrxRemoveOpenPanel').click((element: HTMLElement) => {
            if ($("#openPanelWidget").length) {
                svc.removeWidget($("#openPanelWidget"));

                $("#vrxRemovedWelcomeMessageWidget").trigger("click");
            }


        });

  $('#vrxRemovedWelcomeMessageWidget').click(() => {
            if ($("#welcomeMessageWidget").length) {
                svc.removeWidget($("#welcomeMessageWidget"));
            }
        });

Nasty but works.