Custom Responsive Sort Order

[Kenny-Moore]

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?

[Kenny-Moore]

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.

[Kenny-Moore]

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.

[Kenny-Moore]

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.

[Kenny-Moore]

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.