Angular-gridster2: Adding new widgets by dragging from outside the dashboard

[RavalikaP]

I have an application with multiple dynamic components. Now I would like to add the new widget from outside the dashboard.

Is there any possible way to achieve this?

[tiberiuzuld]

Hi @RavalikaP ,
Yes there is emptyCellDropCallback: undefined, // empty cell drag drop callback. HTML5 Drag & Drop

You need to implement a HTML5 Drag from your element.

Thanks,

[WhatzzUp]

Hi @tiberiuzuld,

i used your

emptyCellDropCallback = this.emptyCellDrop;

and call my

  emptyCellDrop(event: any, item: any) {
    console.log(event)       
    console.log(item)          
    this.dashboardService   //<- this operator doenst work
  }

but i have no access to my class instance or services. Is there another solution?
I need to work with my dashboardService because is provided 90% of the logic.

Cheers

Chris

[tiberiuzuld]

Hi @WhatzzUp ,
In this case this is gridster.
You need to make a variable outside like vm with reference to this.
Or use .bind(this) on the callback function.

Read details here

Let me know if it resolved your issue.

Thanks

[RavalikaP]

Hi @tiberiuzuld ,

Can you provide me some sample code or example?

Thanks

[tiberiuzuld]

Hi @RavalikaP ,

<div class="my-draggable-new-widget" draggable>
     Drag from Here
</div>

     function newWidgetCallback(item){
        // do stuff / save to server / etc
       this.dashboard.push(item); // add item in dashboard
       console.log(item);
     }
     this.options.emptyCellDropCallback = newWidgetCallback.bind(this);

Let me know if this is clear and works.

Thanks

[RavalikaP]

Hi @tiberiuzuld ,

Thank you @tiberiuzuld , it is clear and working for me.

Thanks

[fernandojne20]

Hi, I have a question, when a cell is not empty, the callback emptyCellDropCallback is not firing, obviously the name of the callback, indicate that is only for empty cells, but I still need to add a widget dragging from outside of the grid, into the grid, even if the cell have an item, it is possible to achieve that?

thank you!

[myzhibie]

Same as fernandojne20, I want to do it like dragging widgets from outside and drop down it to the grid, when mouse over the grid during the dragging, the grid detects collisions and pull out other widgets util the I drop down the widget. This dragged widget is generated dynamically . Anybody knows how to implement this?