Gridstack.js: Custom Responsive Sort Order

[gooeyideas]

I am having a hard time finding documentation for how to control the responsive grid.

How can I keep built-in responsiveness without the having the framework reorder the markup?

The markup structure that I am using gridstack with is already in the order that I want the stacked responsive grid to be in. The logic that gridstack does to sort the responsive tiles is undesirable.

[radiolips]

@gooeyideas Are you talking about one column mode - when the window is small (ie on a mobile device), the widgets go into a single column. Is that what you're referring to?

[gooeyideas]

Yes. One column mode removes the widgets and re-orders them when they are added back to the Dom to display for mobile. I would like this to be configurable. I am building an app that allows for a mobile configuration of a layout that is somewhat independent of the desktop layout.

[radiolips]

I see. Well, if you're trying to accomplish that, you can handle that yourself. You can check to see if the grid is in one column mode, and you can store the information separately. Then, when you load (or modify) the grid, you could set the location using those values. Because gridstack is dynamic, it intentionally tries to exclude movement in one column mode.

[gooeyideas]

You are misunderstanding the problem. The layouts can be configured easily. It is the display using gridstack that is problematic. I have written a fair amount of code to accommodate it but I believe that this extra code should not be necessary given what I am trying to accomplish.

The problem is that Gridstack assumes that the one-column order should always be determined by the widget's relative position in the grid. Additionally the logic that Gridstack uses to determine the order of widgets in One Column mode is thus: collapse from "Left to Right" then "Top to Bottom" and as far as I can tell, this functionality is not configurable.

Here is an example of the current behavior for refernce and clarification:
Given this HTML markup:

Gridstack can render:

And in one-column mode Gridstack will render:

For my situation I would like a flag that disables Gridstack's 'One Column Sorting Logic' and allow them to display in the order from the original markup.

Then my example could render in the proper order like this:

If that is not something that the Gridstack team is not willing to implement I understand, however, I would still expect the Gridstack's 'One Column Sorting Logic' to be configurable even if you won't allow the ability to disable it. The default behaviour doesn't make sense for interfaces built for users that speak languages that read 'Right to Left' or 'Top to Bottom'

Take the following 3 column example:

Gridstack does not allow us to convert that layout into a One Column layout that puts the second column under the first followed by the third. Instead it does this:

When we actually want this:

Does this clarify the issue I am having with this feature?

[radiolips]

@gooeyideas Thanks for putting the work into explaining what you're trying to do. It's extremely helpful.

How would you like to see this as part of the gridstack library? I don't think there's a logical way to implement it, but if you have an idea, I'm not entirely against the feature.

[gooeyideas]

I would like to see a oneColumnModeSort option for sorting that also respects the existing rtl property.

oneColumnModeSort: "row | row-reverse | column | column-reverse | none"

• none: Sort by the order the widget's appear in the markup
• row: (default) Sort first by y values (low to high) then sort widgets with the same y value by their x value (based on the rtl setting)
• row-reverse: Sort first by y values (high to low) then sort widgets with the same y value by their x value (based on the rtl setting)
• col: Sort first by x values (based on the rtl setting) then sort widgets with the same x value by their y value (low to high)
• col-reverse: Sort first by x values (based on the rtl setting) then sort widgets with the same x value by their y value (high to low)

[radiolips]

@gooeyideas Good idea! I can do this, but I'd love if you took a stab at it yourself and put in a PR for it, if you'd like.

[gooeyideas]

I would not be able to work on it for a couple of weeks. I have a code cut-off I am currently up against at work. But I will definitely give this a shot.

[kosirm]

This is excelent idea, hopefully you will implement it. What about multiple configs based on screen size? I would prefer to serialize/save completly custom order for various screen sizes (maybe also hide some elements or set custom size, etc), and load this configuration automaticaly based on screen size, like in this excellent example. My 0.2$

[adumesny]

thanks for adding this sorting capability (instead of just top->bottom, left->right) but wondering if this is the right long term approach. To support responsive design you really need multiple layouts based on screen size, but also hide certain panels.
Even with just 1 column <-> full layout you will want to hide some panels, not sure supporting sort order will be that useful longer term.

[gooeyideas]

@adumesny, I believe that what you are asking for is really separate issue altogether. I felt that the existing oneColumnMode feature was unfinished and needed to be configurable. But I do agree that a conditional layout configuration strategy would be nice.

[adumesny]

fair enough.

[JohnArcher]

@gooeyideas Hey there! Thanks a lot for you PR! I would also need that behaviour. @adumesny added some reviews on you PR code. Maybe you could have a look and respond or alter the code accordingly?

And @adumesny , could you help him with the question he as in the 3rd task to complete (about the README), if you know how to do it?

[adumesny]

I've updated the review comments. Problem is @radiolips is the only who can accept changes, and he's dropped the ball...

[JohnArcher]

Thanks @adumesny ! Well, you seem very active and I think you had also one or two PRs that @radiolips didn't merge for whatever reasons (time?), so maybe it is the time to "officially" switch over to your repo and you become the main guy (if you want to fill this role)?

Nothing against @radiolips but it would be good to see progress with gridstack.

[adumesny]

@JohnArcher the good news is radiolips and I are now co-maintainers now and great progress is being made.
The bad news is we both have full time jobs so we need the community to contribute PR we can review, as we're not getting paid for this :)

[JohnArcher]

@adumesny I completely understand! We are in the same boat. :-) But it was not clear what happend to radiolips so I made sense to ask you to take it over then. But I am very glad that he is back and you both joined forces. I hope to provide some work here and there ...

[adumesny]

@gooeyideas after re-reading this request, it still make sense after my changes #1098 which only fixes the row sorting order to be correct (or at least a lot better), but other orders make sense. If you can update your review to latest code, I can test and check it in!

[adumesny]

closing as #1126 adds DOM order option which lets you do any custom one column layout you want.