ember-gridstack [![Pipeline Status][status-image]][status-url] [![Latest NPM release][npm-badge]][npm-badge-url] [![Ember Observer Score][ember-observer-badge]][ember-observer-badge-url]

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

`hbs


Widget #1


Widget #2


`

Components

$3

Used to construct a grid-stack layout

#### Options

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 the gs-{option} is omitted.

Example:

`hbs

...

`

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:

`hbs
@onAdded={{this.added}}
@onChange={{this.change}}
@onDisable={{this.disabled}}
@onDragstart={{this.dragStart}}
@onDrag={{this.drag}}
@onDragstop={{this.dragStop}}
@onDropped={{this.dropped}}
@onEnable={{this.enabled}}
@onRemoved={{this.removed}}
@onResizestart={{this.resizeStart}}
@onResize={{this.resize}}
@onResizestop={{this.resizeStop}}
>
`

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

#### Block Form

The component uses the block form to yield components. In addition, 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:

`hbs


Widget #1


`

$3

Used to construct a grid item inside a component

#### Options

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 the gs is omitted.

Example:

`hbs

...

`

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 component uses the block form to yield the content of the item. In addition, 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:

`hbs



`

`js
//custom-component.js
export default class CustomComponent extends Component {
didInsertElement() {
super.didInsertElement(...arguments);
this.parentContainer.element.addEventListener("resizestop", () => {
//handle resize
});
}
}
``

Touch Support

For touch support do the following

$3

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

[status-image]: https://cd.screwdriver.cd/pipelines/7366/badge
[status-url]: https://cd.screwdriver.cd/pipelines/7366
[npm-badge]: https://img.shields.io/npm/v/ember-gridstack.svg
[npm-badge-url]: https://www.npmjs.com/package/ember-gridstack
[ember-observer-badge]: https://emberobserver.com/badges/ember-gridstack.svg
[ember-observer-badge-url]: https://emberobserver.com/addons/ember-gridstack