API Documentation

Contents

1. GridsterComponent
2. GridsterItemComponent
3. GridsterItemPrototypeDirective
4. GridListItem

GridsterComponent

Inputs

• options - object literal with Gridster options. Object accepts following options:

Option	type	Default	Description
direction	string	'horizontal'	Indicates gridster items floating direction. Possible options: 'horizonatl' / 'vertical'
lanes	number	5	Amount of grid cells dashboard is divided on.
widthHeightRatio	number	1	What is the cell ration between width and height (e.g. if ratio will be 0.5 and widget will have size w=1, h=1 with item width=100px then height=50px).
dragAndDrop	boolean	true	Indicate whether user can reposition gridster items on board by drag n drop.
resizable	boolean	false	Indicate whether user can resize items by drag n drop by edge or corner.
minWidth	number	1	When resizable option is enabled what is minimum width (in cell amount), the item can be resized to.
minHeight	number	1	When resizable option is enabled what is minimum height (in cell amount), the item can be resized to.
maxWidth	number		When resizable option is enabled what is maximum width (in cell amount), the item can be resized to.
maxHeight	number		When resizable option is enabled what is maximum height (in cell amount), the item can be resized to.
defaultItemWidth	number	1	When new item is pushed without w attribute, this value (in cell amount) will then be assigned.
defaultItemHeight	number	1	When new item is pushed without h attribute, this value (in cell amount) will then be assigned.

• draggableOptions - object literal with Gridster draggable options. Object accepts following options:

Option	type	Default	Description
handlerClass	string		Class name as a selector for drag handler in gridster item.

Outputs

• gridsterPositionChange - event fired on each position change. $event is a list of GridListItems of component that position has changed.
• resize - event fired on each resize. $event is single GridListItem of component that size has changed.

Component API

GridsterComponent can directly be access by @ViewChild decorator and used for dynamically changing options. It provides following methods:

• setOption - expects two params to be given: optionName and value. Should be used when we want to dynamically change Gridster option. The method can be chained when we need to set many options at once. To apply changed options we should call reload method. Example:

    this.gridster
      .setOption('lanes', 6)
      .setOption('direction', 'horizontal')
      .reload();

• reload - method responsible for recalculating all items positions and sizes and applying them on dashboard. It should be called after each Gridster configuration change in run time.

HTML Example

Here is an example how template with all these attribute would look:

<gridster [options]="gridsterOptions" [draggableOptions]="gridsterDraggableOptions"
          (gridsterPositionChange)="positionsChanged($event)" (resize)="itemResize($event)">
  ...
</gridster>

GridsterItemComponent

Inputs

• x - horizontal item position (counted in cell amount)
• y - vertical item position (counted in cell amount)
• w - item width (counted in cell amount). This also work with two way binding.
• h - item height (counted in cell amount). This also work with two way binding.

Outputs

• xChange - fired on x position changed. $event is x position after change.
• yChange - fired on y position changed. $event is y position after change.
• wChange - fired on width changed. $event is w position after change.
• hChange - fired on height changed. $event is h position after change.

HTML Example

<gridster-item *ngFor="..."
               [(x)]="widget.x" [(y)]="widget.y"
               [(w)]="widget.w" [(h)]="widget.h">
</gridster-item>

or

<gridster-item *ngFor="..."
               [x]="widget.x" [y]="widget.y" (xChange)="change($event)" (yChange)="change($event)"
               [w]="widget.w" [h]="widget.h" (wChange)="change($event)" (hChange)="change($event)">
</gridster-item>

GridsterItemPrototypeDirective

Inputs

• config - object literal with GridsterItemPrototype configuration. Object accepts following options:

Option	type	Default	Description
helper	boolean	false	If set on true, element it self will not be dragged but clone that will be created on drag start.

Outputs

• drop - fires when user drops element over Gridster dashboard. This is an event on which you should push new item on items list. $event object provides following properties:
  • item - GridListItem object represents dragged prototype
  • gridster - GridsterComponent object that prototype has been dropped on
• start - fires when user starts dragging element. $event object provides following properties:
  • item - GridListItem object represents dragged prototype
• cancel - fires when user drops element outside of Gridster dashboard. $event object provides following properties:
  • item - GridListItem object represents dragged prototype
• enter - fires when user by dragging enters Gridster area. $event object provides following properties:
  • item - GridListItem object represents dragged prototype
  • gridster - GridsterComponent object that prototype has been entered over
• out - fires when user by dragging leaves Gridster area. $event object provides following properties:
  • item - GridListItem object represents dragged prototype
  • gridster - GridsterComponent object that prototype has been left from

HTML Example

GridListItem