Javascript Methods

[MarkPerryBV]

After reading the docs site I have a couple of questions:

1.) Can you dynamically add a "rect" to the Grid after the initial Grid has rendered?
2.) Can you serialize the "rects" out to a js object or array so that I can create a save/load of positions for re-creating a dashboard?

[ivank]

Hi @MarkPerryBV, to answer your questions in order:

1. Yup. The grid is calculated dynamically on each iteration, (as can be seen here https://github.com/clippings/layout-grid/blob/master/js/src/LTGrid.js#L181) so it would be as easy as adding another div to your html.
2. You can do it by iterating your children and calling ".ltRect()" on them to retrieve the data, and JSON.stringify() that. I was going to paste a code sample here, but then I thought about it and decided to incorporate this to the core. I've added a new .ltData() method and made a demo, showing how to serialize and load data here http://clippings.github.io/layout-grid/demo/serialization/

I hope this is helpful.

[MarkPerryBV]

@ivank Thanks for the reply. The .ltData() method was exactly what I was looking for.

I'll have a play with adding a DIV into the container and see how that works.

[MarkPerryBV]

@ivank Any chance your `.ltData()' function could take a callback or similar so I can provide a function which can control the serialisation process. Having all the X,Y,W,H is awesome but I need a way to include my widget id's in that json object. Do you see what I mean?

[MarkPerryBV]

Looking at the code it appears that you might need to add a way to allow users to add arbitrary data into the Rect object. This will allow me to add an ID per Rect as well as things like min-w, max-w etc..

I am building a dashboard page where users can expand, reduce widgets and position them. Some widgets need to be set so they can be a minimum of 2x2.

[ivank]

I'll think about it more, but you could probably implement your solutions by having the min-w max-w constraints enforced outside of layout-grid. You'll need to validate that data server-side anyway

As for the ID - the divs themselves don't get rearranged when they are dragged about, so the index of the divs can be used as their "ID" for the time being.

And your suggestion for a callback might be a good thing to implement regardless.

[MarkPerryBV]

Just been playing around with the serialization methods and I don't think it's usable without serializing all the sizes xs, sm, md, lg.

Lets say you are currently using the 'lg' browser width and we serialize out the positions. If we then try and load these positions back when the browser width is anything but in the 'lg' size the layout of the rects is all wrong.

Also if I just use the classes of -xs- for specifying the X, Y, W, H then it just stacks the rects at 100% width all of the time. I was hoping I didn't need to specify all the classes on every element but it simply doesn't work correctly unless you do.

[ivank]

Hi @MarkPerryBV, I've been playing around with building an admin interface with this myself, and realised there are some features missing.

I've just implemented them and also made a quick demo of how you can accomplish such an interface:
http://clippings.github.io/layout-grid/demos/admin.html

(also moved to using sphinx for docs generation which is much saner than jekyll.

[MarkPerryBV]

The docs are a lot better =). You are still missing a few features though.

1.) Can you make the .ltData() function return all the sizes of the grid when no parameters are used? This way I can get get all the sizes of the grid in one go.

2.) Having all the positions of the grid is still not enough as I need a way to save the "id" of the rect in question. Having all the sizes is great but I still need a way to save what content was in what rect. Some sort of data parameter or call back is needed when the serialization is done.