Gridstack.js: Layout Designer Example/Demo

[edlisten]

Here is a demo/example Gridstack I created, and now sharing (feel free to add it to the demo list). This one adds custom id's to each block, knockout, and a save button.

Thank you to the creators of gridstack.js. It is going to be a big help in my next Google add-on project.

http://coyoteds.edlisten.com/GridstackLayoutExample.html

-Bj

[DataStrategist]

This is exactly what I want. However, I want to use your page to kind of brainstorm a layout and then I would like to output the arrangement to an html page with all the bindings to bootstrap, js, etc... but NOT to the gridster... ie, I just want to use the interactivity to create a blank html page with everything ready-to-go. Would it be easy to manipulate your script to allow for that?

[edlisten]

I am building a Google Add-on that will do just that. Basically I am trying to design a digital signage solution that can be deployed using Google Sign Builder. The above template was my first step. Once I am finished I will try and remember to post a link here so that others can see Gridstack being used.

The solution that I think will work, is to First use the layout example to create a layout and save the arrangement array. Then use that array to create a second gridster with the same layout, but without the editing functionality, and content injected into the appropriate blocks.

[DataStrategist]

hrm. Sounds like that would work, but will you be exposing the html, with all the JS and css embedded? Or how do you expect to produce this?

[edlisten]

I was able to get a working proof of concept as a add-on. It is not polished, or documented at all, but it is code that works.

https://script.google.com/d/1GPyKG2TSTGEz-8LdNYePVVOY_j9CGx38IVVtDBUDyca2kDYkgn1X1vb2/edit?usp=sharing

[DataStrategist]

how would I install it?

[edlisten]

Not yet ready for that. When. It is done it will be an add on that you
install from a Google sheet.

On Dec 12, 2016 3:15 PM, "Amit" [e-mail] wrote:

how would I install it?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/troolee/gridstack.js/issues/568#issuecomment-266540045,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGgLTwZHK5TVw7u2jfqTr0qgE7tVZAsxks5rHatpgaJpZM4LJOY-
.

[DataStrategist]

I'll look forward

[radiolips]

@edlisten What's the status of this? I'd love to hear an update!

[edlisten]

I am probably about a month away from something I can post as an alfa
release. Here is a quick video, without audio, that kind-of shows my
progress. https://youtu.be/Vf1GKBh_ecw

Bjorn Behrendt M.Ed ~ Never Stop Learning

• [email protected] [e-mail] | **Blog: *Edlisten.com
  http://edlisten.com/

On Tue, Dec 20, 2016 at 8:55 AM, radiolips [e-mail] wrote:

@edlisten https://github.com/edlisten What's the status of this? I'd
love to hear an update!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/troolee/gridstack.js/issues/568#issuecomment-268248769,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGgLTzUv-Uh4hifg-WHNSmx2zT3IAiQBks5rJ95XgaJpZM4LJOY-
.

[radiolips]

I watched the video - very cool. Let me know if there's anything I can do to help.

[edlisten]

I have a published an unlisted add-on. It works, but I still need to build in a method for creating block content.

https://chrome.google.com/webstore/detail/coyote-digital-signage/inidckhjkbepegikejihjpecmdmecgbl

[DataStrategist]

Why do you need send-email permission?

On 5 January 2017 at 10:10, edlisten [e-mail] wrote:

I have a published an unlisted add-on. It works, but I still need to build
in a method for creating block content.

https://chrome.google.com/webstore/detail/coyote-digital-signage/
inidckhjkbepegikejihjpecmdmecgbl

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/troolee/gridstack.js/issues/568#issuecomment-270666510,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHuBiyEvfou2myYWsJbrUTxtsMtBjV4vks5rPQfngaJpZM4LJOY-
.

--

~ शांति ~

[phone]
Skype: amit.kdr

[edlisten]

It is the feedback form that uses that permission.

On Jan 5, 2017 12:09 PM, "Amit" [e-mail] wrote:

Why do you need send-email permission?

On 5 January 2017 at 10:10, edlisten [e-mail] wrote:

I have a published an unlisted add-on. It works, but I still need to
build
in a method for creating block content.

https://chrome.google.com/webstore/detail/coyote-digital-signage/
inidckhjkbepegikejihjpecmdmecgbl

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
issuecomment-270666510>,
or mute the thread
AHuBiyEvfou2myYWsJbrUTxtsMtBjV4vks5rPQfngaJpZM4LJOY->
.

--

~ शांति ~

[phone] <+233%2020%20758%204266>
Skype: amit.kdr

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/troolee/gridstack.js/issues/568#issuecomment-270699233,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGgLT-XshyxVWnYpBYmZZUFipfjW1SAZks5rPSO_gaJpZM4LJOY-
.

[saurabhsbhatt]

I saw the customized page developed by "edlisten/Bjorn Behrendt" which is "http://coyoteds.edlisten.com/GridstackLayoutExample.html" and this is closer to my requirements than original GridStack exmaples on "gridstack.js-master/demo/index.html".

I am having a really hardtime customizing the original script for my requirement. My requirement is kind of HTML configurator that is somewhat similar to what we get on the ASP .NET CMS Umbraco or the what is provided by Wix Editor wherein I can create a layout using Gridstack like functionality but I can double-click on any grid OR drag-drop any image from side panel to add to grid. Add and format the text inside the grid, etc.

I am not sure if anyone here has already created such a thing using Gridstack or otherwise and if such a thing is possible using Gridstack (I am usig Gridstack as foundation plugin) but CAN someone guide me as to what should I learn or refer to achieve such a thing ? Like I see that "edlisten/Bjorn Behrendt" has done wonderful job of customizing the GridStack but if I wanted to do something how do I go about it.

Also I am not a hard core JQuery developer but any guidance on what to look for, what topics to read and how should I go about this ? Basically any suggestive plan would be a big help.

[edlisten]

If anyone is interested here is the Add-on I created using Gridstack, I
launched the initial beta today (Link-only):
https://chrome.google.com/webstore/detail/coyote-digital-signage/inidckhjkbepegikejihjpecmdmecgbl

I think it does what a lot of people are looking to do with Gridstack in
terms of using it as a platform for an editor. If there are any sections
of the code that people want to see please let me know, eventually I may
put the add-on on github.

Bjorn Behrendt M.Ed ~ Never Stop Learning

• [email protected] [e-mail] | **Blog: *Edlisten.com
  http://edlisten.com/

On Wed, Apr 26, 2017 at 12:41 PM, saurabhsbhatt [e-mail]
wrote:

I saw the customized page developed by "edlisten/Bjorn Behrendt" which is "
http://coyoteds.edlisten.com/GridstackLayoutExample.html" and this is
closer to my requirements than original GridStack exmaples on
"gridstack.js-master/demo/index.html".

I am having a really hardtime customizing the original script for my
requirement. My requirement is kind of HTML configurator that is somewhat
similar to what we get on the ASP .NET CMS Umbraco or the what is provided
by Wix Editor wherein I can create a layout using Gridstack like
functionality but I can double-click on any grid OR drag-drop any image
from side panel to add to grid. Add and format the text inside the grid,
etc.

I am not sure if anyone here has already created such a thing using
Gridstack or otherwise and if such a thing is possible using Gridstack (I
am usig Gridstack as foundation plugin) but CAN someone guide me as to what
should I learn or refer to achieve such a thing ? Like I see that
"edlisten/Bjorn Behrendt" has done wonderful job of customizing the
GridStack but if I wanted to do something how do I go about it.

Also I am not a hard core JQuery developer but any guidance on what to
look for, what topics to read and how should I go about this ? Basically
any suggestive plan would be a big help.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/troolee/gridstack.js/issues/568#issuecomment-297470400,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGgLT4o_7irOAMtCO7weRmYnWv09ju8bks5rz3OvgaJpZM4LJOY-
.

[mishavthomas]

hi @edlisten i just want widget with smallest size.can you pls help me.now min width is 91 x 60. i need wdget that can minimze to very least size.