🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

ember-gridstack

Package Overview
Dependencies
Maintainers
5
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-gridstack

Ember Gridstack

5.0.0
latest
Source
npm
Version published
Weekly downloads
1.3K
3.56%
Maintainers
5
Weekly downloads
 
Created
Source

ember-gridstack Pipeline Status Latest NPM release Ember Observer Score

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

<GridStack @options={{hash animate=true}} @onChange={{this.change}}>
  <GridStackItem @options={{hash x=0 y=0 w=6 h=2}}>
    Widget #1
  </GridStackItem>
  <GridStackItem @options={{hash x=6 y=0 w=6 h=2}}>
    Widget #2
  </GridStackItem>
</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:

<GridStack @options={{hash animate=true column=12 maxRow=10}}>
  ...
</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:

<GridStack
  @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 <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:

<GridStack as |grid|>
  <GridStackItem @options={{hash x=0 y=0 w=6 h=2}}>
    Widget #1
  </GridStackItem>
</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:

<GridStackItem @options={{hash w=4 h=4 x=0 y=0 noMove=true}}>
  ...
</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:

<GridStackItem @options={{hash x=0 y=0 w=6 h=2}} as |item|>
  <CustomComponent @parentContainer={{item}} />
</GridStackItem>
//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

ember-grid-stack < 2.x

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

Keywords

ember-addon

FAQs

Package last updated on 02 Jun 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts