GridStack Add-on
gridstack.js based "drag-and-drop multi-column grid" layouting to Vaadin applications
GridStackLayout provides drag'n drop multi-column grid layouts for Vaadin applications. Implementation is based on gridstack.js library written by Pavel Reznikov.
This add-on uses Apache 2.0 license, see license of dependencies from project's GitHub page.
If you do not need all features of GridStack, also check my Masonry add-on: https://vaadin.com/directory#!addon/masonry
Sample code
// Creates new GridStack with 3 columns
GridStackLayout gridStack = new GridStackLayout(3);
// Adds label to top left corner, reserving 1 slot
gridStack.addComponent(new Label("Hello World"), 0, 0);
// Adds second label next to earlier, now reserving 2 slots in horizontal
gridStack.addComponent(new Label("Lorem ipsum"), 1, 0, 2, 1);
// Finally add label, and let client side to find location for it (will go to next row, as first is full)
gridStack.addComponent(new Label("Find me space!"));
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
- Uses CamelCase methods and variables, to avoid deprecated warnings on client side
- Fix initialization issue when adding GridStack to parent existing on client
- Improving performance and error management in add-on's code
- With complex DOM structures in children gridstack.js initializing gets slow. To fight this ready listener interface is added. It seams to be faster to add children after gridstack.js has initialized itself, than adding those before initialization. To use this trick add GrisStackReadyListener and add child components only when it's called. As extra benefit event will tell the width of component on client side. This can used to adjust the layout.
- Released
- 2016-08-07
- Maturity
- BETA
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 7.5+
- Vaadin 8.0+ in 0.4.0
- Browser
- Firefox
- Opera
- Safari
- Google Chrome
- Internet Explorer
- Internet Explorer
- Internet Explorer