ember-gridstack

Ember components to build drag-and-drop multi-column grids powered by gridstack.js

Compatibility

• Ember.js v4.4 or above
• Ember CLI v4.4 or above
• Node.js v14 or above

Installation

ember install ember-gridstack

Migrating to v5

View the full v5.0.0 release notes for updates and breaking changes.

Basic Usage

1<GridStack @options={{hash animate=true}} @onChange={{this.change}}>
2  <GridStackItem @options={{hash x=0 y=0 w=6 h=2}}>
3    Widget #1
4  </GridStackItem>
5  <GridStackItem @options={{hash x=6 y=0 w=6 h=2}}>
6    Widget #2
7  </GridStackItem>
8</GridStack>

Components

<GridStack>

Used to construct a grid-stack layout

Options

<GridStack> can take an options object attribute to configure the grid. All gridstack grid options are valid and take the form gs-{option}. However, when using <GridStack> the gs-{option} is omitted.

Example:

1<GridStack @options={{hash animate=true column=12 maxRow=10}}>
2  ...
3</GridStack>

The full list of options can be found here: https://github.com/gridstack/gridstack.js/tree/v4.2.7/doc#grid-options

Actions

All gridstack events can be handled as Ember actions. They take the form on{Eventname}.

Example:

1<GridStack
2  @onAdded={{this.added}}
3  @onChange={{this.change}}
4  @onDisable={{this.disabled}}
5  @onDragstart={{this.dragStart}}
6  @onDrag={{this.drag}}
7  @onDragstop={{this.dragStop}}
8  @onDropped={{this.dropped}}
9  @onEnable={{this.enabled}}
10  @onRemoved={{this.removed}}
11  @onResizestart={{this.resizeStart}}
12  @onResize={{this.resize}}
13  @onResizestop={{this.resizeStop}}
14>

The full list of events can found here: https://github.com/gridstack/gridstack.js/tree/v4.2.7/doc#events

Block Form

The <GridStack> component uses the block form to yield <GridStackItem> components. In addition, <GridStack> yields a reference to itself in the case inner components need the reference or would like to listen to events triggered on the grid element.

Example:

1<GridStack as |grid|>
2  <GridStackItem @options={{hash x=0 y=0 w=6 h=2}}>
3    Widget #1
4  </GridStackItem>
5</GridStack>

<GridStackItem>

Used to construct a grid item inside a <GridStack> component

Options

<GridStackItem> can take an options object attribute to configure the grid item. All gridstack item options are valid and take the form gs-{option}. However, when using <GridStackItem> the gs is omitted.

Example:

1<GridStackItem @options={{hash w=4 h=4 x=0 y=0 noMove=true}}>
2  ...
3</GridStackItem>

The full list of options can be found here: https://github.com/gridstack/gridstack.js/tree/v4.2.7/doc#item-options

Block Form

The <GridStackItem> component uses the block form to yield the content of the item. In addition, <GridStackItem> yields a reference to itself in the case inner components need the reference or would like to listen to events triggered on the grid.

Example:

1<GridStackItem @options={{hash x=0 y=0 w=6 h=2}} as |item|>
2  <CustomComponent @parentContainer={{item}} />
3</GridStackItem>

1//custom-component.js
2export default class CustomComponent extends Component {
3  didInsertElement() {
4    super.didInsertElement(...arguments);
5    this.parentContainer.element.addEventListener("resizestop", () => {
6      //handle resize
7    });
8  }
9}

Touch Support

For touch support do the following

ember-grid-stack < 2.x

By default, the bower dependencies for Gridstack will be installed automatically.