Gridstack.js: Static Bootstrap HTML output

[KrishnaPG]

This is working great for creating and editing dashboards. Thank you for your great work.

But once the design is finalized, how to create a static bootstrap html page (one where resize or move is not required, and no need to load the gridstack in the target page). Instead of loading the gridstack and locking the editing, it would be faster and efficient to load static html directly, if it can be produced by this package.

I understand that presently there is save option that lets the design be saved and retrieved - is it possible to have similar save method that can generate bootstrap compatible standalone html page?

[troolee]

The library is not a designer for static bootstrap files. You can try to create a designer using gridstack, create your own serializer which will make a corresponding HTML code.

[KrishnaPG]

Thanks @troolee . In fact that was part of my question: how to serialize to bootstrap compatible html from the grid? Do you have helper routines? Looks like you are using custom x, y coordinates - any documentation on how to convert them to bootstrap compatible col-md-xyz etc.?

[troolee]

You can use the same CSS as gridstack uses:

.grid-stack-item[data-gs-x=1] { left: ... };
.grid-stack-item[data-gs-x=2] { left: ... };
.grid-stack-item[data-gs-x=3] { left: ... };

and so on. Then generate HTML with the same attributes data-gs-x, `data-gs-width...

[artknight]

@KrishnaPG, @troolee do you know of or were you able to create a serializer? If yes, would you mind sharing your code? ( trying to avoid re-inventing the wheel if something exists already )

[KrishnaPG]

No @artknight I was not able to get the serialization part done.

[saurabhsbhatt]

Any export to static Bootstrap HTML or serializer available ? Am specifically looking for that.

[vineetk68]

+1

[radiolips]

What exactly are you trying to do? I can try to weigh in on this, but I'm not certain of what the goal is.

[ahmedfekry]

I have the same problem, i am trying to create static bootstrap html using gridstack. how to export the html into static ?
@radiolips

[radiolips]

As troolee mentioned, you can simply use the HTML and CSS without actually doing all of the Javascript. That should accomplish what you're trying to do. What's the specific thing you're trying to do that you're unable to do?

[ahmedfekry]

I have tried to use the html and css but the "data-gs-y" and "data-gs-height" properties fails to load tries to search for it in the css but did not find it.

[michaellwatson]

I understand how you could pass the width values into bootstrap column values, but what about the height values? Did anyone get a solution to this? Hardcoding the height values might make responsive problems

[Educ8IT]

I'm using gridstack to allow DnD form creation from available DB fields. I'm also looking into creating a converter to a BS grid layout but in the short term I am using gridstack to render the forms and disabling the DnD through the gridstack options.

The conversion process will probably require nested rows and columns when some items are more than 1 unit high which seems like a rather complicated process and could lead to an unexpected rendering order when reducing the viewport (such as for mobile views).

I'll post back if I get something useful developed but in the meantime would recommend just using gridstack to render it without DnD.

[campaignium]

I too am looking for a conversion to a static bootstrap layout. I use gridstack as a DnD designer to create a dashboard layout, however when viewing the dashboard live, it will be static (no DnD), but it will need to rely on bootstraps responsive functionality to respond to different viewports appropriately.

[BakaaToTest]

Hello everyone i'm trying to do quite the same in php but i'm kinda stuck with the nested row. Did someone managed to do this ?
Thanks :)

[michaellwatson]

@BakaaToTest I did this nested example if that helps https://codepen.io/michaellwatson/pen/EvGEgM

[BakaaToTest]

thanks you very much but that's not what i'm talking about. I'm trying from a gridstack json like

'[ { "x": 0, "y": 6, "width": 8, "height": 6, "index": "1" }, { "x": 8, "y": 0, "width": 4, "height": 4, "index": "3" }, { "x": 8, "y": 4, "width": 4, "height": 2, "index": "4" }, { "x": 0, "y": 0, "width": 12, "height": 2, "index": "5" } ]';

to create a bootstrap grid similar in php. Because in my application in the back office i can choose the display of the front office with gridstack.js but in the front office it will be displayed in boostrap with some content in each block.

[michaellwatson]

Do you have an example of what you want to do?

[BakaaToTest]

For exemple from this

I will store the json in database.

And then from the json i want to autocreate the bootstrap grid who will look like this

Don't mind it's just for test right now.