gridstack / gridstack.js

Build interactive dashboards in minutes.

gridstack.js

Mobile-friendly modern Typescript library for dashboard layout and creation. Making a drag-and-drop, multi-column responsive dashboard has never been easier. Has multiple bindings and works great with Angular (included), React, Vue, Knockout.js, Ember and others (see frameworks section).

Inspired by no-longer maintained gridster, built with love.

Check http://gridstackjs.com and these demos.

If you find this lib useful, please donate PayPal (use “send to a friend” to avoid 3% fee) or Venmo (adumesny) and help support it!

Join us on Slack: https://gridstackjs.slack.com

Table of Contents generated with DocToc

• Demo and API Documentation
• Usage
  • Install
  • Include
  • Basic usage
  • Requirements
  • Specific frameworks
  • Extend Library
  • Extend Engine
  • Change grid columns
  • Custom columns CSS
  • Override resizable/draggable options
  • Touch devices support
• Migrating
  • Migrating to v0.6
  • Migrating to v1
  • Migrating to v2
  • Migrating to v3
  • Migrating to v4
  • Migrating to v5
  • Migrating to v6
  • Migrating to v7
  • Migrating to v8
  • Migrating to v9
  • Migrating to v10
• jQuery Application
• Changes
• The Team

Demo and API Documentation

Please visit http://gridstackjs.com and these demos, and complete API documentation

Usage

Install

yarn add gridstack
// or
npm install --save gridstack

Include

ES6 or Typescript

import 'gridstack/dist/gridstack.min.css';
import { GridStack } from 'gridstack';

Alternatively (single combined file, notice the -all.js) in html

<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
<script src="node_modules/gridstack/dist/gridstack-all.js"></script>

Note: IE support was dropped in v2, but restored in v4.4 by an external contributor (I have no interest in testing+supporting obsolete browser so this likely will break again in the future). You can use the es5 files and polyfill (larger) for older browser instead. For example:

<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
<script src="node_modules/gridstack/dist/es5/gridstack-poly.js"></script>
<script src="node_modules/gridstack/dist/es5/gridstack-all.js"></script>

Basic usage

creating items dynamically...

// ...in your HTML
<div class="grid-stack"></div>

// ...in your script
var grid = GridStack.init();
grid.addWidget({w: 2, content: 'item 1'});

... or creating from list

// using serialize data instead of .addWidget()
const serializedData = [
  {x: 0, y: 0, w: 2, h: 2},
  {x: 2, y: 3, w: 3, content: 'item 2'},
  {x: 1, y: 3}
];

grid.load(serializedData);

... or DOM created items

// ...in your HTML
<div class="grid-stack">
  <div class="grid-stack-item">
    <div class="grid-stack-item-content">Item 1</div>
  </div>
  <div class="grid-stack-item" gs-w="2">
    <div class="grid-stack-item-content">Item 2 wider</div>
  </div>
</div>

// ...in your script
GridStack.init();

...or see list of all API and options available.

see jsfiddle sample as running example too.

Requirements

GridStack no longer requires external dependencies as of v1 (lodash was removed in v0.5 and jquery API in v1). v3 is a complete HTML5 re-write removing need for jquery. v6 is native mouse and touch event for mobile support, and no longer have jquery-ui version. All you need to include now is gridstack-all.js and gridstack.min.css (layouts are done using CSS column based %).

Specific frameworks

search for 'gridstack' under NPM for latest, more to come...

• Angular: we now ship out of the box with Angular wrapper components - see Angular Component.
• Angular9: lb-gridstack Note: very old v0.3 gridstack instance so recommend for concept ONLY if you wish to use directive instead. Code has not been vented at as I use components.
• AngularJS: gridstack-angular
• Ember: ember-gridstack
• knockout: see demo using component, but check custom bindings ticket which is likely better approach.
• Rails: gridstack-js-rails
• React: see demo with src, or react-gridstack-example, or read on what hooks to use
• Vue: see demo with v3 src or v2 src
• Aurelia: aurelia-gridstack, see demo

Extend Library

You can easily extend or patch gridstack with code like this:

// extend gridstack with our own custom method
GridStack.prototype.printCount = function() {
  console.log('grid has ' + this.engine.nodes.length + ' items');
};

let grid = GridStack.init();

// you can now call
grid.printCount();

Extend Engine

You can now (5.1+) easily create your own layout engine to further customize your usage. Here is a typescript example

import { GridStack, GridStackEngine, GridStackNod, GridStackMoveOpts } from 'gridstack';

class CustomEngine extends GridStackEngine {

  /** refined this to move the node to the given new location */
  public override moveNode(node: GridStackNode, o: GridStackMoveOpts): boolean {
    // keep the same original X and Width and let base do it all...
    o.x = node.x;
    o.w = node.w;
    return super.moveNode(node, o);
  }
}

GridStack.registerEngine(CustomEngine); // globally set our custom class

Change grid columns

GridStack makes it very easy if you need [1-12] columns out of the box (default is 12), but you always need 2 things if you need to customize this:

1. Change the column grid option when creating a grid to your number N

GridStack.init( {column: N} );

2. also include gridstack-extra.css if N < 12 (else custom CSS - see next). Without these, things will not render/work correctly.

<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
<link href="node_modules/gridstack/dist/gridstack-extra.min.css" rel="stylesheet"/>

<div class="grid-stack">...</div>

Note: class .grid-stack-N will automatically be added and we include gridstack-extra.min.css which defines CSS for grids with custom [2-11] columns. Anything more and you'll need to generate the SASS/CSS yourself (see next).

See example: 2 grids demo with 6 columns

Custom columns CSS

If you need > 12 columns or want to generate the CSS manually you will need to generate CSS rules for .grid-stack-item[gs-w="X"] and .grid-stack-item[gs-x="X"].

For instance for 4-column grid you need CSS to be:

.gs-4 > .grid-stack-item[gs-x="1"]  { left: 25% }
.gs-4 > .grid-stack-item[gs-x="2"]  { left: 50% }
.gs-4 > .grid-stack-item[gs-x="3"]  { left: 75% }

.gs-4 > .grid-stack-item { width: 25% }
.gs-4 > .grid-stack-item[gs-w="2"]  { width: 50% }
.gs-4 > .grid-stack-item[gs-w="3"]  { width: 75% }
.gs-4 > .grid-stack-item[gs-w="4"]  { width: 100% }

Better yet, here is a SCSS code snippet, you can use sites like sassmeister.com to generate the CSS for you instead:

$columns: 20;
@function fixed($float) {
  @return round($float * 1000) / 1000; // total 2+3 digits being %
}
.gs-#{$columns} > .grid-stack-item {

  width: fixed(100% / $columns);

  @for $i from 1 through $columns - 1 {
    &[gs-x='#{$i}'] { left: fixed((100% / $columns) * $i); }
    &[gs-w='#{$i+1}'] { width: fixed((100% / $columns) * ($i+1)); }
  }
}

you can also use the SCSS src/gridstack-extra.scss included in NPM package and modify to add more columns.

Sample gulp command for 30 columns:

gulp.src('node_modules/gridstack/dist/src/gridstack-extra.scss')
        .pipe(replace('$start: 2 !default;','$start: 30;'))
        .pipe(replace('$end: 11 !default;','$end: 30;'))
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(rename({extname: '.min.css'}))
        .pipe(gulp.dest('dist/css'))

Override resizable/draggable options

You can override default resizable/draggable options. For instance to enable other then bottom right resizing handle you can init gridstack like:

GridStack.init({
  resizable: {
    handles: 'e,se,s,sw,w'
  }
});

Touch devices support

gridstack v6+ now support mobile out of the box, with the addition of native touch event (along with mouse event) for drag&drop and resize. Older versions (3.2+) required the jq version with added touch punch, but doesn't work well with nested grids.

This option is now the default:

let options = {
  alwaysShowResizeHandle: 'mobile' // true if we're on mobile devices
};
GridStack.init(options);

See example.

Migrating

Migrating to v0.6

starting in 0.6.x change event are no longer sent (for pretty much most nodes!) when an item is just added/deleted unless it also changes other nodes (was incorrect and causing inefficiencies). You may need to track added|removed events if you didn't and relied on the old broken behavior.

Migrating to v1

v1.0.0 removed Jquery from the API and external dependencies, which will require some code changes. Here is a list of the changes:

0. see previous step if not on v0.6 already

1. your code only needs to import GridStack from 'gridstack' or include gridstack.all.js and gristack.css (don't include other JS) and is recommended you do that as internal dependencies will change over time. If you are jquery based, see jquery app section.

2. code change:

OLD initializing code + adding a widget + adding an event:

// initialization returned Jquery element, requiring second call to get GridStack var
var grid = $('.grid-stack').gridstack(opts?).data('gridstack');

// returned Jquery element
grid.addWidget($('<div><div class="grid-stack-item-content"> test </div></div>'), undefined, undefined, 2, undefined, true);

// jquery event handler
$('.grid-stack').on('added', function(e, items) {/* items contains info */});

// grid access after init
var grid = $('.grid-stack').data('gridstack');

NEW

// element identifier defaults to '.grid-stack', returns the grid
// Note: for Typescript use window.GridStack.init() until next native 2.x TS version
var grid = GridStack.init(opts?, element?);

// returns DOM element
grid.addWidget('<div><div class="grid-stack-item-content"> test </div></div>', {width: 2});
// Note: in 3.x it's ever simpler 
// grid.addWidget({w:2, content: 'test'})

// event handler
grid.on('added', function(e, items) {/* items contains info */});

// grid access after init
var grid = el.gridstack; // where el = document.querySelector('.grid-stack') or other ways...

Other rename changes

`GridStackUI` --> `GridStack`
`GridStackUI.GridStackEngine` --> `GridStack.Engine`
`grid.container` (jquery grid wrapper) --> `grid.el` // (grid DOM element)
`grid.grid` (GridStackEngine) --> `grid.engine`
`grid.setColumn(N)` --> `grid.column(N)` and `grid.column()` // to get value, old API still supported though

Recommend looking at the many samples for more code examples.

Migrating to v2

make sure to read v1 migration first!

v2 is a Typescript rewrite of 1.x, removing all jquery events, using classes and overall code cleanup to support ES6 modules. Your code might need to change from 1.x

1. In general methods that used no args (getter) vs setter can't be used in TS when the arguments differ (set/get are also not function calls so API would have changed). Instead we decided to have all set methods return GridStack to they can be chain-able (ex: grid.float(true).cellHeight(10).column(6)). Also legacy methods that used to take many parameters will now take a single object (typically GridStackOptions or GridStackWidget).

`addWidget(el, x, y, width, height)` --> `addWidget(el, {with: 2})`
// Note: in 2.1.x you can now just do addWidget({with: 2, content: "text"})
`float()` --> `getFloat()` // to get value
`cellHeight()` --> `getCellHeight()` // to get value
`verticalMargin` --> `margin` // grid options and API that applies to all 4 sides.
`verticalMargin()` --> `getMargin()` // to get value

2. event signatures are generic and not jquery-ui dependent anymore. gsresizestop has been removed as resizestop|dragstop are now called after the DOM attributes have been updated.

3. oneColumnMode would trigger when window.width < 768px by default. We now check for grid width instead (more correct and supports nesting). You might need to adjust grid oneColumnSize or disableOneColumnMode.

Note: 2.x no longer support legacy IE11 and older due to using more compact ES6 output and typecsript native code. You will need to stay at 1.x

Migrating to v3

make sure to read v2 migration first!

v3 has a new HTML5 drag&drop plugging (63k total, all native code), while still allowing you to use the legacy jquery-ui version instead (188k), or a new static grid version (34k, no user drag&drop but full API support). You will need to decide which version to use as gridstack.all.js no longer exist (same is now gridstack-jq.js) - see include info.

NOTE: HTML5 version is almost on parity with the old jquery-ui based drag&drop. the containment (prevent a child from being dragged outside it's parent) and revert (not clear what it is for yet) are not yet implemented in initial release of v3.0.0.
Also mobile devices don't support h5 drag events (will need to handle touch) whereas v3.2 jq version now now supports out of the box (see v3.2 release)

Breaking changes:

1. include (as mentioned) need to change

2. GridStack.update(el, opt) now takes single GridStackWidget options instead of only supporting (x,y,w,h) BUT legacy call in JS will continue working the same for now. That method is a complete re-write and does the right constrain and updates now for all the available params.

3. locked(), move(), resize(), minWidth(), minHeight(), maxWidth(), maxHeight() methods are hidden from Typescript (JS can still call for now) as they are just 1 liner wrapper around update(el, opt) anyway and will go away soon. (ex: move(el, x, y) => update(el, {x, y}))

4. item attribute like data-gs-min-width is now gs-min-w. We removed 'data-' from all attributes, and shorten 'width|height' to just 'w|h' to require less typing and more efficient (2k saved in .js alone!).

5. GridStackWidget used in most API width|height|minWidth|minHeight|maxWidth|maxHeight are now shorter w|h|minW|minH|maxW|maxH as well

Migrating to v4

make sure to read v3 migration first!

v4 is a complete re-write of the collision and drag in/out heuristics to fix some very long standing request & bugs. It also greatly improved usability. Read the release notes for more detail.

Unlikely Breaking Changes (internal usage):

1. removeTimeout was removed (feedback over trash will be immediate - actual removal still on mouse up)

2. the following GridStackEngine methods changed (used internally, doesn't affect GridStack public API)

// moved to 3 methods with new option params to support new code and pixel coverage check
`collision()` -> `collide(), collideAll(), collideCoverage()`
`moveNodeCheck(node, x, y, w, h)` -> `moveNodeCheck(node, opt: GridStackMoveOpts)`
`isNodeChangedPosition(node, x, y, w, h)` -> `changedPosConstrain(node, opt: GridStackMoveOpts)`
`moveNode(node, x, y, w, h, noPack)` -> `moveNode(node, opt: GridStackMoveOpts)`

3. removed old obsolete (v0.6-v1 methods/attrs) getGridHeight(), verticalMargin, data-gs-current-height, locked(), maxWidth(), minWidth(), maxHeight(), minHeight(), move(), resize()

Migrating to v5

make sure to read v4 migration first!

v5 does not have any breaking changes from v4, but a focus on nested grids in h5 mode: You can now drag in/out of parent into nested child, with new API parameters values. See the release notes.

Migrating to v6

the API did not really change from v5, but a complete re-write of Drag&Drop to use native mouseevent (instead of HTML draggable=true which is buggy on Mac Safari, and doesn't work on mobile devices) and touchevent (mobile), and we no longer have jquery ui option (wasn't working well for nested grids, didn't want to maintain legacy lib).

The main difference is you only need to include gridstack.js and get D&D (desktop and mobile) out of the box for the same size as h5 version.

Migrating to v7

New addition, no API breakage per say. See release notes about creating sub-grids on the fly.

Migrating to v8

Possible breaking change if you use nested grid JSON format, or original Angular wrapper, or relied on specific CSS paths. Also target is now ES2020 (see release notes).

• GridStackOptions.subGrid -> GridStackOptions.subGridOpts rename. We now have GridStackWidget.subGridOpts vs GridStackNode.subGrid (was both types which is error prone)
• GridStackOptions.addRemoveCB -> GridStack.addRemoveCB is now global instead of grid option
• removed GridStackOptions.dragInOptions since GridStack.setupDragIn() has it replaced since 4.0
• remove GridStackOptions.minWidth obsolete since 5.1, use oneColumnSize instead
• CSS rules removed .grid-stack prefix for anything already gs based, 12 column (default) now uses .gs-12, extra.css is less than 1/4th it original size!, gs-min|max_w|h attribute no longer written (but read)

Migrating to v9

New addition - see release notes about sizeToContent feature. Possible break:

• GridStack.onParentResize() is now called onResize() as grid now directly track size change, no longer involving parent per say to tell us anything. Note sure why it was public.

Migrating to v10

we now support much richer responsive behavior with GridStackOptions.columnOpts including any breakpoint width:column pairs, or automatic column sizing.

breaking change:

• disableOneColumnMode, oneColumnSize have been removed (thought we temporary convert if you have them). use columnOpts: { breakpoints: [{w:768, c:1}] } for the same behavior.
• 1 column mode switch is no longer by default (columnOpts is not defined) as too many new users had issues. Instead set it explicitly (see above).
• oneColumnModeDomSort has been removed. Planning to support per column layouts at some future times. TBD

jQuery Application

This is old and no longer apply to v6+. You'll need to use v5.1.1 and before

import 'gridstack/dist/gridstack.min.css';
import { GridStack } from 'gridstack';
import 'gridstack/dist/jq/gridstack-dd-jqueryui';

Note: jquery & jquery-ui are imported by name, so you will have to specify their location in your webpack (or equivalent) config file, which means you can possibly bring your own version

  alias: {
    'jquery': 'gridstack/dist/jq/jquery.js',
    'jquery-ui': 'gridstack/dist/jq/jquery-ui.js',
    'jquery.ui': 'gridstack/dist/jq/jquery-ui.js',
    'jquery.ui.touch-punch': 'gridstack/dist/jq/jquery.ui.touch-punch.js',
  },

Alternatively (single combined file) in html

<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
<!-- HTML5 drag&drop (70k) -->
<script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
<!-- OR jquery-ui drag&drop (195k) -->
<script src="node_modules/gridstack/dist/gridstack-jq.js"></script>
<!-- OR static grid (40k) -->
<script src="node_modules/gridstack/dist/gridstack-static.js"></script>

We have a native HTML5 drag'n'drop through the plugin system (default), but the jquery-ui version can be used instead. It will bundle jquery (3.5.1) + jquery-ui (1.13.1 minimal drag|drop|resize) + jquery-ui-touch-punch (1.0.8 for mobile support) in gridstack-jq.js.

NOTE: in v4, v3: we ES6 module import jquery & jquery-ui by name, so you need to specify location of those .js files, which means you might be able to bring your own version as well. See the include instructions.

NOTE: in v1.x IFF you want to use gridstack-jq instead and your app needs to bring your own JQ version, you should instead include gridstack-poly.min.js (optional IE support) + gridstack.min.js + gridstack.jQueryUI.min.js after you import your JQ libs. But note that there are issue with jQuery and ES6 import (see 1306).

As for events, you can still use $(".grid-stack").on(...) for the version that uses jquery-ui for things we don't support.

Changes

View our change log here.

The Team

gridstack.js is currently maintained by Alain Dumesny, before that Dylan Weiss, originally created by Pavel Reznikov. We appreciate all contributors for help.

gridstack.js's Issues

Bug in add_widget with auto_position parameter of "false"

@troolee If you call add_widget with an auto_position parameter of false, it actually uses the auto_position mode.
Looks like its setting el.attr('data-gs-auto-position', auto_position) and when it reads it back it sets the node.auto_position = "false" as a string.
Later, this get's evaluated to true when it does the check
if (node.auto_position == true){}
if ("false" == true) which ends up going into the block.

remove_widget with problem when dragdrop after

Hello @troolee

In my project, I use a grid.remove_widget(el). However, after of use this method, and move the widget(drag drop), the grid shows the widget again.

What can be done?

if(checked) { if($("wdgWidgetID").length > 0) { grid.remove_widget($("#wdgWidgetID")); } } else { if($("wdgWidgetID").length == 0) { grid.add_widget("< span id='wdgWidgetID' >Title< /span >", 0, 0, 1, 2, true); } }

Obs.: The span no has space

Att

Issue with Widget Overlap

I've discovered an issue with an overlapping widget. My configuration is

"[{"x":0,"y":0,"width":4,"height":3},{"x":4,"y":0,"width":2,"height":4},{"x":6,"y":0,"width":6,"height":5},{"x":0,"y":3,"width":4,"height":2},{"x":0,"y":5,"width":6,"height":3},{"x":6,"y":5,"width":6,"height":2},{"x":0,"y":8,"width":4,"height":6},{"x":4,"y":8,"width":8,"height":5},{"x":4,"y":13,"width":8,"height":2},{"x":0,"y":14,"width":4,"height":2},{"x":4,"y":15,"width":8,"height":3},{"x":0,"y":16,"width":4,"height":2},{"x":0,"y":18,"width":4,"height":2},{"x":4,"y":18,"width":8,"height":2},{"x":0,"y":20,"width":4,"height":1}]"

Essentially when you resize the top left most widget to be higher, the bottom left most widget gets pushed to the top and the two overlap. It seems like the bottom left most widget can not be pushed into another lower row, so it get's push to row 0. Going to look into this, but also wondering if you've seen it or have any suggestions.

Grid of previously saved items does not affect position

Hey,

I cannot set position of previously saved items like described in issue #13
The size of the items are okay but not the position

Is it linked to the _styles attribute from the grid that is not been regenerated as at the time of saving.

I can give you my source files if you need to reproduce the issue ; or discuss about that

Regards,

prepare package for cdnjs

max-height / max-width for grid

It would be perfect if there would be an option where you could constrain the hole grid

BUG - Non-Float mode is broken in latest version

@troolee Looks like the latest code has broken the "non-float" mode. Even when float is set to false, widgets are not pushed to the top, and behave like just as float mode does. I reverted to the previous gridstack.js to make sure it wasn't on my end. The old version works as expected.

Ability to specify left right padding on columns as well As vertical margin between rows

@troolee In some cases you want to be able to define the padding on columns and rows. By default currently rows have a padding of 20px and columns have a padding of 10px on both left and right sides. These values should be options. This will allow users to have grid items touch if so desired.

Additional Events

It would be useful to be able to listen to additional events - on start moving, on end moving, on start resize, on end resize. For example, may want to be add or remove classes during these events, possibly to supply visual aids to the user during a change. Just like you do with on_change
self.container.trigger('on_start_moving', [event, ui]); or something to that effect

I can't use resize method

Hi, when I use grid.resize($('.grid-stack-item[data-gs-x="0"]'), 3, 4); it gives me errors

Dragging widgets around can still cause unexpected changes in other widgets

Looks like this is still happening in certain cases (related to #23). Using the below layout.

[{"widget_id":12,"x":0,"y":0,"width":12,"height":1,"locked":false},{"widget_id":2,"x":0,"y":1,"width":4,"height":3,"locked":false},{"widget_id":3,"x":4,"y":1,"width":8,"height":1,"locked":false},{"widget_id":6,"x":4,"y":2,"width":8,"height":1,"locked":false},{"widget_id":4,"x":4,"y":3,"width":8,"height":1,"locked":false},{"widget_id":7,"x":0,"y":4,"width":12,"height":1,"locked":false},{"widget_id":8,"x":0,"y":5,"width":12,"height":1,"locked":false},{"widget_id":9,"x":0,"y":6,"width":12,"height":1,"locked":false},{"widget_id":15,"x":0,"y":7,"width":12,"height":3,"locked":false}]

To get it happen move the square above the top line. Things are shifted and even if you drag the square back to its original position, the layout has changed.

node.el.detach() breaks focused elements

This line here:
https://github.com/troolee/gridstack.js/blob/master/src/gridstack.js#L675

After calling resize() on an element which has a text field which the user is typing into, detaching and appending again causes the user to lose focus.

Why is detach() called and is there any other way this can be done? Specifically, I am using a rich text editor inside the node and detaching and appending again breaks the editor.

Commenting these lines out fixes my problem, but I'm not sure what problems it will cause.

finish documentation

Only Draw Needed CSS Classes

With a high data-gs-max-height (and large widgets on the page) it can make resizing and initial load less performant.

For all nodes, just draw the CSS classes +/- 10 cell_heights.
This loop causes the performance problems when max_height is something like 10,000 for example, that loop makes resizing extremely glitchy.

ANIJS not working with widgets

Hi,

i am trying to use ANIJS to animate add/remove of the widgets in the grid but for some reason this would not work. is there any event that gets triggered on add/remove?

the syntax is data-anijs="if: <event_name>, do: animated bounceIn"

thanks,
Nick

Floating Nodes - Dragging into Empty Space

It would be nice to be able to drag elements into empty areas. Right now nodes are placed as high in the grid as possible.

Found a good example of this one here - http://rawgit.com/ManifestWebDesign/angular-gridster/master/index.html#/main
Click "enabled draggability" and "enable floating" . You can now drag elements in any empty area and they aren't pushed to the top most available spot.

How to re-size height when i re-sizing window

HI, when i re-sizing window, block's width are re-sizing perfectly but height. i want to re-size width and height equally.
Thank you.

resize height dynamicaly

How to re-size block height when re-sizing window?

grid from serialize

Hi ,
Again me ,could you please make method that will build a new grid from previously stored positions , like gridster: http://gridster.net/demos/grid-from-serialize.html
Thank you

Disable Drag & Resize

Hello, please could you tell me is it possible to disable drag&resize , and if it is, explain me how? Thank you.
RE: node.el.resizable('enable') & node.el.draggable('disable');

Touch Support

It would be awesome to have touch support in this library.

finish demo site

Add Widget bug

While adding a widget, the constraints of the grid (width and height) are not respected.

Opacity on Dragging node & Bootstrap

First off, loving Gridstack. It's working for me much better than gridster because of it's compatability with bootstrap. Looks like your demo site and the latest version are out of sync. I'm seeing some issues with the opacity and dashed line on drag. Looks like .grid-stack-item-content got renamed to .box?

Also, I'm considering modifying the js to use actual bootstrap classes col-md-x etc instead of data-gs-width. I was thinking for any cases where bootstrap is not included, a separate css file can be loaded which sets up percentage values for those. What are your thoughts on this?

Dragging widgets around can cause unexpected changes in other widgets

I'm noticing in "float" mode, dragging widgets around the page can cause elements to shift even if the dragged widget is returned to its original position. I think widget positions need to be calculated based on the original layout at time the drag is started, rather than the current visible layout.

I'll try to describe an example. Say you have three widgets in a row. A B C. If I drag C over to where A is, A and B get pushed down to a second row. In the same drag (without letting go), I return C to its original position, A and B stay in their new positions on a second row. (Note: Happens easier if you drag C slowly back to its original position). This also happens if you cause reposition via resizing.

I think I've seen this bug occur in non-float mode as well, but it definitely occurs more regularly in float mode because of the nature of float mode.

function locked doesnt lock widget

Hi,
If i use function locked, i get stack-item and want lock it, but if i lock with true i can move with this item.

$(".grid-stack").on('dblclick', function (event, ui) {
var grid = $('.grid-stack').data('gridstack');
var el = event.target;
if (el != null) {
grid.locked(el, true);
}
});

Multiple Resize-Handles

Hi,

is it possible to show more than one Resize Handle? I would also like to have a handle on the bottom-left side, so that the User can decide where he wants to resize his widget.

Thanks

PS: I think i wrote this into the wrong section. Sorry :/

Width options doesn't works

Hi @troolee,

I am trying to use the gridstack width, changing for 3. Although, this change to 3 columns and the width of external div('.grid-stack') are correct, the width value of "item" stayed in 8,3% and not in 33%.

Is getting so:

https://cloud.githubusercontent.com/assets/3621189/5599368/3ddd6898-92ac-11e4-8a2c-acd65f9f1e32.png

When it should stay that way:

https://cloud.githubusercontent.com/assets/3621189/5599367/3dd99434-92ac-11e4-9cbd-80cc718b62e2.png

The code are:

var options = {width: 3,cell_height: 35,vertical_margin: 10,animate: true}; $('.grid-stack').gridstack(options); var grid = $('.grid-stack').data('gridstack');

// Begin For

grid.add_widget("<div class='grid-stack-item' data-gs-no-resize='true'><div class='grid-stack-item-content'><div class='grid-heading'><small>Label</small></div><div class='grid-body'><div class='text-center'> </div></div></div></div>', 0, 0, 4, 2, true);

//End For

Att
Mateus Giuliano

remove_widget el must be a jquery object to work

It appears that the remove_widget method is missing a line at the top:
el = $(el);

Without this line you must pass in a jquery object so the code is actually doing a $($(el))
Like the method add_widget, this method should be expecting "el" to be a string selector.

Height automatically

When I disable dragging and resizing is it possible to make height automatically growing with content?
Than you :)

Gridstack and require.js

Hi,

is there a way to integrate this with Require.js and load it as an AMD module?

Thanks,
Nick

minified CSS/JS files

How can I approach collapse the grid columns into a single column on smaller screens?

Thanks in advance!

Nested gridstacks?

I would like to group widgets to one panel, so I tried to insert a sub gridstack into a "grid-stack-item-content". But resizing or moving widgets leads to several effects...
The widgets of the nested gridstack will be moved to the root gridstack - I tried to fix this by changing the reassignment of widgets in the on_end_moving function (save the original parent of widget, detach and attach to original container instead of "self.container").
The result behaves better (the elements remain in their original container) - but it seems that positioning and sorting of the root-widgets does not only affect the root level widgets but includes nested widgets in some way. Just for fun I commented out the pack and fix-collisions routines - the result did not look so bad (I can move widgets around in the nested container and can move or resize the complete container without any problems - it seems to me that gridstack could basically support my requierement).
Do you know some way to handle multiple nested gridstack instances in one document?

Bug - Non-Movable/Resizable items should be locked in place

When an item is made "non-movable" & "non-resizable", it should be fixed in place. It seems however that dragging other widgets near it can push the non-movable item out of it's current position. The position of non-movable item should not be considered as a possible new location for the item being dragged.

Save Data?

This probably isn't the proper place to ask this, but how can I get the data on demand (coordinates, width, height, id)?

It seems like most people would eventually want to save their layout to a database or something else, but I am not finding any information on how to do this.

Demo page should serve assets over the same protocol as the page

The <script> tags at the bottom of the page use http, causing the page to load improperly over https. If the user is running an extension like "HTTPS Everywhere", the demo will fail to load. Please use // instead of http://.

method : remove_widget() bug?

When i try to remove a widget i have this error on my chrome debugger

_Uncaught TypeError: Cannot set property 'id' of undefined (gridstack.js:196)

The last 2 lines of the stack are as follow

GridStackEngine.remove_node (gridstack.js:196)
GridStack.remove_widget (gridstack.js:497)

My code that calls the method

myElement = $('#myWidgetDiv'+wc_id)[0].outerHTML;
myElement = $(myElement); // with this line or without same error with the method remove_widget
var grid = $('.grid-stack').data('gridstack');
grid.remove_widget(myElement);

The content of myElement

<div id="myWidgetDiv2" class="grid-stack-item ui-draggable ui-resizable" data-gs-x="7" data-gs-y="0" data-gs-width="5" data-gs-height="13"><div class="grid-stack-item-content"><div class="panel panel-default"><div class="panel-heading panel-move ui-draggable-handle"><span class="pull-right"><button type="button" class="btn btn-default btn-xs btn-remove-widget" title="Supprimer" value="2"><span class="glyphicon glyphicon-trash"></span></button></span>Mes derniers logs</div><table class="table table-condensed table-striped"><thead><tr><th>Objet</th><th>Action</th><th><span class="pull-right">Date</span></th></tr></thead><tbody><tr><td><a href="#" class="widget" title="Frais"><span class="fa fa-taxi"></span> Hotel Suisse</a></td><td><span class="label label-default">Création</span></td><td><span class="pull-right text-muted small">il y a 2 jours</span></td></tr><tr><td><a href="#" class="widget" title="Frais"><span class="fa fa-taxi"></span> Taxi Poissy</a></td><td><span class="label label-default">Création</span></td><td><span class="pull-right text-muted small">il y a 2 jours</span></td></tr><tr><td><a href="#" class="widget" title="Client"><span class="fa fa-briefcase"></span> Aldoluck AG</a></td><td><span class="label label-default">Modif.</span></td><td><span class="pull-right text-muted small">il y a 2 jours</span></td></tr><tr><td><a href="#" class="widget" title="Ressource"><span class="fa fa-users"></span> Abdelkader Aoucif</a></td><td><span class="label label-default">Modif.</span></td><td><span class="pull-right text-muted small">il y a 2 jours</span></td></tr><tr><td><a href="#" class="widget" title="Client"><span class="fa fa-briefcase"></span> Aldoluck AG</a></td><td><span class="label label-default">Modif.</span></td><td><span class="pull-right text-muted small">il y a 2 jours</span></td></tr></tbody></table></div></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: block;"></div></div>

Please, help :)

Knockout demo and dynamic column change on window stretch event

Hi,

I think the work that was done for this project so far is amazing and it would be good to have a demo on how this library can be used using knockout. Also, with regards to bootstrap it would be nice to have some kind of more elaborate layout when the window width/height is changed.

What I mean by that is if you have 3 column widget layout on stretching the layout will change to 2 columns and 1 column at the end....this would be really cool...

Bootstrap classes

...to use actual bootstrap classes col-md-x etc instead of data-gs-width

Max Height of Infinity

Would be nice if (like other options), max height could be set to 0 for infinity (and should likely be the default instead of 100.

Doing #41 would make this possible performance wise.

TypeError: Not enough arguments to CSSStyleSheet.insertRule.

Hey,

i found your tool yesterday and thought it would be awesome to implement it in one of my projects. Today you updated your project and now gridstack.js does not work. It throws the following error:

TypeError: Not enough arguments to CSSStyleSheet.insertRule.
self._styles.insertRule(css);

I looked up the error and you are missing an argument with an index. I took index from the for-loop where the method is called and magically it works again ;)

I hope you fix this error, because also the demo does not work at the moment either.

Thanks in advance :)

Not able to resize

I don't see anything syntactically different with what I have versus the demo and everything else works great except I can't re-size anything with the drag handle, I can with the re-size function.

I tried putting breakpoints in the source on all the re-size functions there were and none of them fired, its almost like the event isn't being triggered.

Does anything come to mind?

animate resize

Hi,

would you add a function to animate height / width? That would look nice...
something like: grid.resize-animate(child1, 4, 3);

Best Regards,
Peter

Not working in jquery 2.1.1

please check this bug.

My code is:

var options = {
    cell_height: 80,
    vertical_margin: 10
};
$('.grid-stack').gridstack(options);

Can't resize or move widgets in "responsive" mode

I don't know if this is a bug or a feature, but inability to resize/move widgets in responsive mode is quite frustrating.

Also, how can I target the element that was repositioned/resized, I could parse items, but need to target only the element which was modified.

remove_all removes place holder and it is never readded

Seems as though the remove_all node methods also removes the place holder and it is never added back. If i remove_all and then add a new set of widgets, the place holder is gone. Is this a bug or how is remove_all supposed to be used?

remove_widget el must be a jquery object to work

It appears that the remove_widget method is missing a line at the top:
el = $(el);

Without this line you must pass in a jquery object so the code is actually doing a $($(el))
Like the method add_widget, this method should be expecting "el" to be a string selector.

Dependencies @Jquery UI - Specify modules to pick

Hello Pavel,

I thank you for your efficient and simple grid on bootstrap.

Would it be possible to specifiy in your release what we must pick from Jquery UI ?
Cause it's 234Ko minified and inside we have accordion and other useless stuff i suppose. :)

Incorrect Positioning in Float mode

I'm having an issue with float mode. It seems that as soon as you click and hold a widget (without actually dragging anywhere), it picks a new location for the widget (as indicated by the placeholder dashed box), 1 or 2 spaces below.

Here is my configuration -
[{"x":0,"y":0,"width":12,"height":5},{"x":0,"y":5,"width":4,"height":2},{"x":4,"y":5,"width":4,"height":2},{"x":8,"y":5,"width":4,"height":2},{"x":0,"y":7,"width":2,"height":2},{"x":3,"y":7,"width":4,"height":2},{"x":7,"y":7,"width":4,"height":2},{"x":8,"y":9,"width":4,"height":2},{"x":0,"y":10,"width":4,"height":2},{"x":4,"y":10,"width":4,"height":2},{"x":9,"y":11,"width":3,"height":2},{"x":0,"y":12,"width":4,"height":2},{"x":4,"y":12,"width":4,"height":2}]

To test this, click and hold one of the widgets in the bottom row. You will see that it instantly incorrectly positions the place holder.