Gridstack.js: hide widget

[troolee]

@zhaoyoubing says:

I also suggest to add a "hide" or "minimize" function. With the "hide" function, the re-layout without deletion from DOM can also be implemented.

[troolee]

Hi,

I've added a parameter detach_node to remove_widget API method. If you pass false then DOM node will not be removed from the DOM tree. So you could hide it instead.

https://github.com/troolee/gridstack.js#remove_widgetel-detach_node

[rcastillog]

Hi,
I tried this functionality. I use detach mode to hide the element and then use add_widget to make it visible (I don't know if this was the correct way to do this), it works the first time (hide and show), but after next try to hide it, the widget's place was used by another widget (as it should works), but the one that should be eliminated was placed over, ignoring the occupied space, as it was placed on its own grid, it can be dragged around and placed over other ones freely.

Probably this is because I'm using add_widget and it is not the best option to show the hidden component, could you give an advice?
Thanks.

[troolee]

Hi @rcastillog,

Can you please provide a code sample using jsfiddle or just place here?

Thank you.

[rcastillog]

Sure, in the next days I'll try to prepare a little sample and post it here. Sry for answer before, lots of job.

Greetings.

[kdietrich]

@rcastillog Have you set up a sample?

[radiolips]

I'm closing this out due to inactivity, but I'll provide a small response that I think will solve the problem as well.

The method makeWidget was added recently and is likely what you'll need here. If you call addWidget, it'll add the element to the DOM, and I believe you're ending up with duplicates. makeWidget, on the other hand, will add an existing element to gridstack. If you call removeWidget and pass detachNode=false, then makeWidget is likely the counterpart that will help you accomplish what you want.

Please feel free to reopen this ticket if this does not help.

[Senthilmj]

can you provide example for hide/show