Directory

← Back

GridStack Add-on

gridstack.js based "drag-and-drop multi-column grid" layouting to Vaadin applications

Author

Rating

Popularity

<100

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!"));

Compatibility

(Loading compatibility data...)

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

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.
Online