search

swiety85 / angular2gridster

Angular implementation of well known Gridster (no jQuery, no external libraries, only Angular and Rx.js).
https://swiety85.github.io/angular2gridster/
MIT License
203 stars 75 forks source link

Hiding GridsterItem without destroying the component #207

Open andrisarkameru opened 6 years ago

andrisarkameru commented 6 years ago

Hi!

Is there a possibility to create a feature to "hide" GridsterItem in a way that it is fully collapsed, but still exists on the grid (html is not destroyed, therefore, inner angular2 component stays alive as well). With the other items "reflowing" up to take the now empty space?

The use case is that I want to switch between contexts or tabs that contain different set of GridsterItems on the same Gridster component, but I do not wish to destroy the items/create them with *ngFor - every time the set changes, because components loose some part of navigation information (like scroll position inside them)

I understand that is not yet possible. Maybe you could suggest how it should be done and I could try to create a pull request for that ?

swiety85 commented 6 years ago

Hi, please check if suggestions in #179 would be a solution for your problem.

andrisarkameru commented 6 years ago

Hi!

Ideally I think the best would be an option to simply set size of the widget to 0:0 but I don't know how easily implementable that is. Right now the widget fallbacks to size 1:1, if I set 0:0.

That suggestion is something close, but I will have to experiment some more on this. At first glance it looks like there may be some buggy behavior with drag and drop when I just set lane number to 600.

I will experiment some more to know if this workaround works

swiety85 commented 6 years ago

Can't you just have couple gridster components, one for each tab and when a user clicks tab link just show related one (rest hide by css display: none)?

niralmunjariya commented 6 years ago

@andrisarkameru You can set the height and width of the widgets according to the selected tab, e.g I want to show widget number 1,2,3 in the tab 1 then set other widgets' width and height to 0 and make sure to change the options of the gridster-item to as below:

{
    minWidth: 0,
    minHeight: 0
}

After setting the above options it'll allow you to set the width and height to 0. I hope it will help.