Gridstack.js

https://gridstackjs.com/
Admin
Gridstack.js is a modern pure Typescript library for building interactive dashboards with draggable,...
Tokens:34,595
Snippets:386
Trust Score:8.9
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install Gridstack.js via npm

Source: https://gridstackjs.com/

Use this command to add the library to your project dependencies.

```bash
npm install gridstack
```

--------------------------------

### options (Accessor)

Source: https://gridstackjs.com/angular/doc/html/classes/gridstack-item.component.GridstackItemComponent.html

Get or set the configuration options for the grid item, including position, size, and behavior.

```APIDOC
## options

### Description
Retrieves or updates the grid item configuration options (GridStackNode). When setting, it defines the position, size, and behavior of the item.

### Parameters
- **val** (GridStackNode) - Required (for setter) - The configuration object defining item properties.

### Returns
- **GridStackNode** - The current grid options.
```

--------------------------------

### getDD

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Get the global drag & drop implementation instance.

```APIDOC
## Static getDD(): DDGridStack

### Description
Get the global drag & drop implementation instance. This provides access to the underlying drag & drop functionality.
```

--------------------------------

### Get Drag and Drop Instance

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Accesses the global drag and drop implementation instance.

```javascript
const dd = GridStack.getDD();  
// Access drag & drop functionality
```

--------------------------------

### getFloat

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Get the current float mode setting.

```APIDOC
## getFloat(): boolean

### Description
Get the current float mode setting.
```

--------------------------------

### getColumn

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Get the number of columns in the grid.

```APIDOC
## getColumn(): number

### Description
Get the number of columns in the grid (default 12).
```

--------------------------------

### Define children Property

Source: https://gridstackjs.com/angular/doc/html/interfaces/types.NgGridStackOptions.html

Optional array of Angular widget definitions for initial grid setup.

```typescript
children?: NgGridStackWidget[]
```

--------------------------------

### Implement deserialize method

Source: https://gridstackjs.com/angular/doc/html/classes/base-widget.BaseWidget.html

Override this method to handle custom restoration logic, ensuring super.deserialize(w) is called for basic setup.

```typescript
deserialize(w: NgGridStackWidget) {  
  super.deserialize(w); // Call parent for basic setup  
  
  // Custom initialization logic  
  if (w.input?.complexData) {  
    this.processComplexData(w.input.complexData);  
  }  
}
```

--------------------------------

### init

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Initialize the HTML element into a grid.

```APIDOC
## Static init(options?: GridStackOptions, elOrString?: GridStackElement): GridStack

### Description
Initializing the HTML element, or selector string, into a grid will return the grid.

### Parameters
- **options** (GridStackOptions) - Optional - Grid options.
- **elOrString** (GridStackElement) - Optional - Element or CSS selector to convert to a grid.
```

--------------------------------

### initAll

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Initialize a list of elements into grids.

```APIDOC
## Static initAll(options?: GridStackOptions, selector?: string): GridStack[]

### Description
Will initialize a list of elements (given a selector) and return an array of grids.

### Parameters
- **options** (GridStackOptions) - Optional - Grid options.
- **selector** (string) - Optional - Elements selector to convert to grids.
```

--------------------------------

### getCellHeight

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Gets the current cell height in pixels.

```APIDOC
## getCellHeight(forcePixel?: boolean): number

### Description
Gets the current cell height in pixels. This takes into account the unit type and converts to pixels if necessary.

### Parameters
- **forcePixel** (boolean) - Optional - If true, forces conversion to pixels even when cellHeight is specified in other units. Default is false.
```

--------------------------------

### Initialize All Grids

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Initializes multiple grid elements based on a selector and returns an array of instances.

```javascript
const grids = GridStack.initAll();  
grids.forEach(...)
```

--------------------------------

### getCellFromPixel

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Get the position of the cell under a pixel on screen.

```APIDOC
## getCellFromPixel(position: MousePosition, useDocRelative?: boolean): CellPosition

### Description
Get the position of the cell under a pixel on screen.

### Parameters
- **position** (MousePosition) - Required - The position of the pixel to resolve in absolute coordinates, as an object with top and left properties.
- **useDocRelative** (boolean) - Optional - If true, value will be based on document position vs parent position. Default is false.
```

--------------------------------

### Initialize a basic Gridstack grid

Source: https://gridstackjs.com/

Include the required CSS and JS files, then initialize the grid in your HTML. The grid is populated using a JavaScript array of widget objects.

```html
<script src="node_modules/gridstack/dist/gridstack-all.js"></script>
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
<style type="text/css">
  .grid-stack { background: #FAFAD2; }
  .grid-stack-item-content { background-color: #18BC9C; }
</style>

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

<script type="text/javascript">
  var items = [
    {content: 'my first widget'}, // will default to location (0,0) and 1x1
    {w: 2, content: 'another longer widget!'} // will be placed next at (1,0) and 2x1
  ];
  var grid = GridStack.init();
  grid.load(items);
</script>
```

--------------------------------

### Get Float Mode

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Checks whether the floating mode is currently enabled for the grid.

```javascript
const isFloating = grid.getFloat();  
console.log('Floating enabled:', isFloating);
```

--------------------------------

### setupDragIn

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Configures external elements to be draggable into the grid, such as items from a sidebar or toolbar.

```APIDOC
## setupDragIn(dragIn?: string | HTMLElement[], dragInOptions?: DDDragOpt, widgets?: GridStackWidget[], root?: HTMLElement | Document)

### Description
Call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.

### Parameters
- **dragIn** (string | HTMLElement[]) - Optional - String selector or list of dom elements.
- **dragInOptions** (DDDragOpt) - Optional - Options for the drag behavior.
- **widgets** (GridStackWidget[]) - Optional - GridStackWidget definition to assign to each element.
- **root** (HTMLElement | Document) - Optional - Optional root which defaults to document.

### Returns
- **void**
```

--------------------------------

### Initialize Grid

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Initializes a grid instance or retrieves an existing one from an element.

```javascript
const grid = GridStack.init();  
  
Note: the HTMLElement (of type GridHTMLElement) will store a `gridstack: GridStack` value that can be retrieve later  
const grid = document.querySelector('.grid-stack').gridstack;
```

--------------------------------

### Get Column Count

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Retrieves the total number of columns currently defined in the grid.

```javascript
const columnCount = grid.getColumn(); // returns 12 by default
```

--------------------------------

### constructor

Source: https://gridstackjs.com/doc/html/classes/DDResizableHandle.html

Initializes a new instance of the DDResizableHandle class.

```APIDOC
## constructor

### Description
Creates a new DDResizableHandle instance for a specific grid item.

### Signature
`new DDResizableHandle(host: GridItemHTMLElement, dir: string, option: DDResizableHandleOpt): DDResizableHandle`

### Parameters
- **host** (GridItemHTMLElement) - The host element for the resize handle.
- **dir** (string) - The direction of the resize handle.
- **option** (DDResizableHandleOpt) - Configuration options for the handle.
```

--------------------------------

### Get Floating Mode Status

Source: https://gridstackjs.com/doc/html/classes/GridStackEngine.html

Retrieves the current floating mode setting from the engine.

```typescript
const isFloating = engine.float;  
console.log('Floating enabled:', isFloating);
```

--------------------------------

### Prepare nodes with prepareNode

Source: https://gridstackjs.com/doc/html/classes/GridStackEngine.html

Validates and initializes a node's properties before it is added to the grid.

```javascript
const node = { w: 3, h: 2, content: 'Hello' };  
const prepared = engine.prepareNode(node);  
console.log('Node prepared at:', prepared.x, prepared.y);
```

--------------------------------

### Get Grid Items

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Returns an array of all grid items, excluding placeholders, in DOM order.

```javascript
const items = grid.getGridItems();  
items.forEach(item => {  
  console.log('Item ID:', item.gridstackNode.id);  
});
```

--------------------------------

### constructor

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Initializes a new instance of the GridStack class for a given HTML element.

```APIDOC
## constructor

### Description
Constructs a grid item from the given element and options.

### Signature
`new GridStack(el: GridHTMLElement, opts?: GridStackOptions): GridStack`

### Parameters
- **el** (GridHTMLElement) - Required - The HTML element tied to this grid after it's been initialized.
- **opts** (GridStackOptions) - Optional - Grid options used for configuration.
```

--------------------------------

### load

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Loads widgets from a list to restore or update a grid layout.

```APIDOC
## load(items, addRemove)

### Description
Load widgets from a list. This will call update() on each (matching by id) or add/remove widgets that are not there. Used to restore a grid layout for a saved layout list.

### Parameters
- **items** (GridStackWidget[]) - List of widgets definition to update/create
- **addRemove** (boolean | AddRemoveFcn) - Optional. Boolean (default true) or callback method to control if and how missing widgets can be added/removed.

### Returns
- **GridStack** - The grid instance for chaining
```

--------------------------------

### Get Row Count

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Returns the current number of rows in the grid, which is at least the minimum row count.

```javascript
const rowCount = grid.getRow();  
console.log('Grid has', rowCount, 'rows');
```

--------------------------------

### DDResizeOpt Interface

Source: https://gridstackjs.com/doc/html/interfaces/DDResizeOpt.html

Configuration options for widget resizing behavior.

```APIDOC
## Interface: DDResizeOpt

### Description
Defines options for configuring the resize behavior of drag-and-drop widgets.

### Properties
- **autoHide** (boolean) - Optional - If true, resize handles are hidden until mouse-over. Default: true on desktop, false on mobile.
- **element** (string | HTMLElement) - Optional - Custom element or query selector used as the resize handle instead of the default generated handle.
- **handles** (string) - Optional - Defines the sides available for resizing (e.g., 'e, se, s, sw, w'). Default: 'se' (south-east).
```

--------------------------------

### Get Margin

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Returns the uniform margin value in pixels, or undefined if margins differ across sides.

```javascript
const margin = grid.getMargin();  
if (margin !== undefined) {  
  console.log('Uniform margin:', margin, 'px');  
} else {  
  console.log('Margins are different on different sides');  
}
```

--------------------------------

### Enable Grid Interactions

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Re-enables moving and resizing for all widgets. This is a shortcut for enabling both move and resize capabilities.

```javascript
grid.enableMove(true);  
grid.enableResize(true);
```

```javascript
// Re-enable all interactions  
grid.enable();  
  
// Enable only this grid, not sub-grids  
grid.enable(false);
```

--------------------------------

### constructor(el: HTMLElement, option?: DDDroppableOpt)

Source: https://gridstackjs.com/doc/html/classes/DDDroppable.html

Initializes a new instance of the DDDroppable class for a given HTML element.

```APIDOC
## constructor(el: HTMLElement, option?: DDDroppableOpt)

### Description
Creates a new DDDroppable instance to enable drag and drop behavior on the specified element.

### Parameters
- **el** (HTMLElement) - Required - The DOM element to extend.
- **option** (DDDroppableOpt) - Optional - Configuration options for the drag and drop behavior.
```

--------------------------------

### options

Source: https://gridstackjs.com/angular/doc/html/classes/gridstack.component.GridstackComponent.html

Access or update the GridStack configuration options.

```APIDOC
## options

### Description
Get or set the current GridStack configuration options. Setting these options can be done before initialization or dynamically after the grid is created.

### Signature
- **get options()**: GridStackOptions
- **set options(o: GridStackOptions)**: void

### Parameters
- **o** (GridStackOptions) - Required - The configuration object for the grid.

### Returns
- **GridStackOptions** (on get) - The current grid configuration.
```

--------------------------------

### Get Cell Height

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Retrieves the current cell height in pixels, with an optional parameter to force pixel conversion.

```javascript
const height = grid.getCellHeight();  
console.log('Cell height:', height, 'px');  
  
// Force pixel conversion  
const pixelHeight = grid.getCellHeight(true);
```

--------------------------------

### Responsive Interface Definition

Source: https://gridstackjs.com/doc/html/interfaces/Responsive.html

The Responsive interface provides configuration properties to control how the grid adapts to different screen sizes.

```APIDOC
## Interface: Responsive

### Description
Configuration for responsive grid behavior. Defines how the grid responds to different screen sizes by changing column counts.

### Properties
- **breakpointForWindow** (boolean) - Optional - Specify if breakpoints are for window size or grid size (default: false = grid).
- **breakpoints** (Breakpoint[]) - Optional - Explicit width:column breakpoints instead of automatic 'columnWidth'.
- **columnMax** (number) - Optional - Maximum number of columns allowed (default: 12).
- **columnWidth** (number) - Optional - Wanted width to maintain (+-50%) to dynamically pick a column count.
- **layout** (ColumnOptions) - Optional - Global re-layout mode when changing columns.
```

--------------------------------

### Get current cell width

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Retrieves the calculated cell width in pixels based on the container width and column count.

```javascript
const width = grid.cellWidth();  
console.log('Cell width:', width, 'px');  
  
// Use cell width to calculate widget dimensions  
const widgetWidth = width * 3; // For a 3-column wide widget
```

--------------------------------

### float

Source: https://gridstackjs.com/doc/html/classes/GridStackEngine.html

Accessors to get or set the floating mode of the grid engine. When enabled, widgets can move up to fill empty spaces.

```APIDOC
## Accessor: float

### Description
Gets or sets the current floating mode of the grid engine. When floating is enabled, widgets can move up to fill empty spaces.

### Signature
- **get float()**: boolean
- **set float(val: boolean)**: void

### Parameters
- **val** (boolean) - Required - true to enable floating, false to disable.

### Returns
- (boolean) - Returns true if floating is enabled, false otherwise.

### Example
```javascript
// Get floating mode
const isFloating = engine.float;

// Set floating mode
engine.float = true;
```
```

--------------------------------

### Convert existing DOM elements to widgets

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Initializes grid functionality on elements already present in the DOM. Use this when elements are created manually or by a framework.

```javascript
const grid = GridStack.init();  
  
// Create HTML content manually, possibly looking like:  
// <div id="item-1" gs-x="0" gs-y="0" gs-w="3" gs-h="2"></div>  
grid.el.innerHTML = '<div id="item-1" gs-w="3"></div><div id="item-2"></div>';  
  
// Convert existing elements to widgets  
grid.makeWidget('#item-1'); // Uses gs-* attributes from DOM  
grid.makeWidget('#item-2', {w: 2, h: 1, content: 'Hello World'});  
  
// Or pass DOM element directly  
const element = document.getElementById('item-3');  
grid.makeWidget(element, {x: 0, y: 1, w: 4, h: 2});
```

--------------------------------

### enable(recurse?: boolean)

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Re-enables widgets moving/resizing.

```APIDOC
## enable(recurse?: boolean)

### Description
Re-enables widgets moving/resizing. Note: This is a no-op for static grids.

### Parameters
- **recurse** (boolean) - Optional - if true (default), sub-grids also get updated.

### Returns
- **GridStack** - the grid instance for chaining
```

--------------------------------

### Create Widget Elements

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Generates the default HTML structure for a grid item based on the provided configuration.

```javascript
const element = grid.createWidgetDivs({ w: 2, h: 1, content: 'Hello World' });
```

--------------------------------

### gsCreateNgComponents(host, n, add, isGrid)

Source: https://gridstackjs.com/angular/doc/html/functions/gridstack.component.gsCreateNgComponents.html

Creates or deletes an Angular component for a grid item.

```APIDOC
## gsCreateNgComponents

### Description
Creates a new Angular component for a grid item or handles its deletion when required.

### Signature
`gsCreateNgComponents(host: HTMLElement | GridCompHTMLElement, n: NgGridStackNode, add: boolean, isGrid: boolean): undefined | HTMLElement`

### Parameters
- **host** (HTMLElement | GridCompHTMLElement) - The host element for the grid or item.
- **n** (NgGridStackNode) - The grid stack node configuration.
- **add** (boolean) - If true, creates the component; if false, skips/deletes it.
- **isGrid** (boolean) - Indicates if the host is a grid.

### Returns
- **undefined | HTMLElement** - Returns the created HTMLElement or undefined.
```

--------------------------------

### makeWidget

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Converts an existing DOM element into a grid widget.

```APIDOC
## makeWidget(els, options)

### Description
If you add elements to your grid by hand, you have to tell gridstack afterwards to make them widgets. Makes the given element a widget and returns it.

### Parameters
- **els** (GridStackElement) - Widget or single selector to convert.
- **options** (GridStackWidget) - Optional. Widget definition to use instead of reading attributes.

### Returns
- **GridItemHTMLElement** - The converted GridItemHTMLElement
```

--------------------------------

### requestFullscreen

Source: https://gridstackjs.com/angular/doc/html/interfaces/gridstack-item.component.GridItemCompHTMLElement.html

Displays the element in fullscreen mode.

```APIDOC
## requestFullscreen(options?: FullscreenOptions): Promise<void>

### Description
Displays the element in fullscreen mode and returns a promise that resolves when the operation is complete.

### Parameters
- **options** (FullscreenOptions) - Optional - Configuration for navigation UI behavior.
```

--------------------------------

### compact(layout?: CompactOptions, doSort?: boolean)

Source: https://gridstackjs.com/doc/html/classes/GridStackEngine.html

Re-layout grid items to reclaim any empty space. This optimizes the grid layout by moving items to fill gaps.

```APIDOC
## compact(layout?: CompactOptions, doSort?: boolean)

### Description
Re-layout grid items to reclaim any empty space. This optimizes the grid layout by moving items to fill gaps.

### Parameters
- **layout** (CompactOptions) - Optional - layout algorithm to use: 'compact' (default) or 'list'.
- **doSort** (boolean) - Optional - if true (default), sort nodes by position before compacting.

### Returns
- **GridStackEngine** - the engine instance for chaining.
```

--------------------------------

### Defining Grid Options

Source: https://gridstackjs.com/angular/doc/html/classes/gridstack.component.GridstackComponent.html

Configure grid behavior by defining a GridStackOptions object.

```typescript
gridOptions: GridStackOptions = {  
  column: 12,  
  cellHeight: 'auto',  
  animate: true  
};
```

--------------------------------

### column

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Sets the number of columns in the grid and manages layout transitions.

```APIDOC
## column

### Description
Updates the number of columns in the grid and applies a re-layout strategy to existing widgets.

### Parameters
- **column** (number) - Required - Integer > 0 representing the new column count.
- **layout** (ColumnOptions) - Optional - The re-layout strategy ('moveScale', 'move', 'scale', or 'none').

### Returns
- **GridStack** - The grid instance for chaining.
```

--------------------------------

### DDResizableOpt Interface Definition

Source: https://gridstackjs.com/doc/html/interfaces/DDResizableOpt.html

Configuration options for the resize functionality.

```APIDOC
## Interface: DDResizableOpt

### Description
Defines the options available for configuring the resize behavior of drag-and-drop elements.

### Properties
- **autoHide** (boolean) - Optional - If true, hides resize handles until mouse over. Default: true on desktop, false on mobile.
- **element** (string | HTMLElement) - Optional - Custom element or query selector used as the resize handle.
- **handles** (string) - Optional - Sides to enable resizing from (e.g., 'e, se, s, sw, w'). Default: 'se'.
- **maxHeight** (number) - Optional - Maximum height constraint.
- **maxHeightMoveUp** (number) - Optional - Maximum height move up constraint.
- **maxWidth** (number) - Optional - Maximum width constraint.
- **maxWidthMoveLeft** (number) - Optional - Maximum width move left constraint.
- **minHeight** (number) - Optional - Minimum height constraint.
- **minWidth** (number) - Optional - Minimum width constraint.
- **resize** (function) - Optional - Callback triggered during resize: (event: Event, ui: DDUIData) => void.
- **start** (function) - Optional - Callback triggered when resize starts: (event: Event, ui: DDUIData) => void.
- **stop** (function) - Optional - Callback triggered when resize stops: (event: Event) => void.
```

--------------------------------

### GridStackMoveOpts

Source: https://gridstackjs.com/doc/html/interfaces/GridStackMoveOpts.html

Interface definition for options used during GridStackEngine.moveNode()

```APIDOC
## Interface: GridStackMoveOpts

### Description
Configuration options for the `GridStackEngine.moveNode()` method.

### Properties
- **cellHeight** (number) - Optional - Cell height value.
- **cellWidth** (number) - Optional - Cell width value used to calculate coordinates.
- **collide** (GridStackNode) - Optional - The node with the most coverage that we collided with.
- **forceCollide** (boolean) - Optional - Forces a collision check even if the node does not move.
- **h** (number) - Optional - Widget height dimension (default: 1).
- **marginBottom** (number) - Optional - Bottom margin.
- **marginLeft** (number) - Optional - Left margin.
- **marginRight** (number) - Optional - Right margin.
- **marginTop** (number) - Optional - Top margin.
- **nested** (boolean) - Optional - If true, indicates a recursive call to prevent simple swap or coverage collision (default: false).
- **pack** (boolean) - Optional - Whether to pack the layout (default: true).
- **rect** (GridStackPosition) - Optional - Pixel position of the currently dragged items for overlap checks.
- **resizing** (boolean) - Optional - True if the node is currently being live resized.
- **skip** (GridStackNode) - Optional - A node to skip during collision detection.
- **w** (number) - Optional - Widget width dimension (default: 1).
- **x** (number) - Optional - Widget x position (default: 0).
- **y** (number) - Optional - Widget y position (default: 0).
```

--------------------------------

### on(event, callback)

Source: https://gridstackjs.com/doc/html/classes/DDResizable.html

Registers a callback function for specific resize events.

```APIDOC
## on(event: "resize" | "resizestart" | "resizestop", callback: (event: DragEvent) => void)

### Description
Registers an event listener for resize-related events.

### Parameters
- **event** (string) - Required - The event name to listen for ("resize", "resizestart", or "resizestop").
- **callback** (function) - Required - The function to execute when the event occurs.
```

--------------------------------

### grid

Source: https://gridstackjs.com/angular/doc/html/classes/gridstack.component.GridstackComponent.html

Access the underlying GridStack instance.

```APIDOC
## grid

### Description
Get the underlying GridStack instance. This allows direct access to the full GridStack API methods.

### Signature
- **get grid()**: undefined | GridStack

### Returns
- **undefined | GridStack** - The GridStack instance if initialized, otherwise undefined.
```

--------------------------------

### prepareNode

Source: https://gridstackjs.com/doc/html/classes/GridStackEngine.html

Prepares and validates a node's coordinates and values for the current grid.

```APIDOC
## prepareNode(node: GridStackNode, resizing?: boolean): GridStackNode

### Description
Prepare and validate a node's coordinates and values for the current grid. This ensures the node has valid position, size, and properties before being added to the grid.

### Parameters
- **node** (GridStackNode) - Required - The node to prepare and validate.
- **resizing** (boolean) - Optional - If true, resize the node down if it's out of bounds; if false, move it to fit.
```

--------------------------------

### on(name, callback)

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Registers a callback function to listen for specific grid events.

```APIDOC
## on(name, callback)

### Description
Registers a callback function to listen for one or more grid events.

### Parameters
- **name** (string) - Required - Event name(s) to listen for (space separated for multiple).
- **callback** (GridStackEventHandlerCallback) - Required - Function to call when event occurs.

### Returns
- **GridStack** - The grid instance for chaining.
```

--------------------------------

### GridStack.addGrid

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Creates a new grid instance from a parent element and optional configuration, including loading children from a JSON structure.

```APIDOC
## Static addGrid

### Description
Creates a grid with the given options, including loading any children from a JSON structure. This is an alternative to init() for initializing grids from serialized data.

### Parameters
- **parent** (HTMLElement) - Required - HTML element parent to the grid
- **opt** (GridStackOptions) - Optional - Grid options used to initialize the grid and list of children

### Returns
- **GridStack** - The initialized grid instance
```

--------------------------------

### updateOption(opts)

Source: https://gridstackjs.com/doc/html/classes/DDResizable.html

Updates the configuration options for an existing DDResizable instance.

```APIDOC
## updateOption(opts: DDResizableOpt)

### Description
Updates the current configuration options for the resizable instance.

### Parameters
- **opts** (DDResizableOpt) - Required - The new options to apply.

### Returns
- **DDResizable** - The instance itself.
```

--------------------------------

### GridStack Static Callbacks

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Static callback configurations for customizing grid behavior, rendering, and data persistence.

```APIDOC
## Static Callbacks

- **addRemoveCB** (AddRemoveFcn) - Callback used when new items or grids are created or deleted.
- **renderCB** (RenderFcn) - Callback to control the creation of widget content.
- **saveCB** (SaveFcn) - Callback during saving to inject extra data for each widget.
- **updateCB** ((w: GridStackNode) => void) - Called after a widget has been updated.
```

--------------------------------

### Compact grid layout

Source: https://gridstackjs.com/doc/html/classes/GridStackEngine.html

Reclaims empty space in the grid. Use 'list' to maintain existing sort order.

```javascript
// Compact to fill empty spaces  
engine.compact();  
  
// Compact preserving item order  
engine.compact('list');
```

--------------------------------

### on(name, callback)

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Registers an event handler for grid events. You can provide a single event name or a space-separated list of events to listen for.

```APIDOC
## on(name, callback)

### Description
Registers an event handler for grid events. You can call this on a single event name, or a space-separated list of events.

### Parameters
- **name** (string) - Required - The event name(s) to listen for (e.g., "added", "change", "drag", "resize").
- **callback** (Function) - Required - The handler function to execute when the event occurs.

### Returns
- **GridStack** - The grid instance for method chaining.

### Supported Events
- `added`: Called when widgets are being added to a grid.
- `change`: Occurs when widgets change their position/size.
- `disable`: Called when grid becomes disabled.
- `dragstart`: Called when grid item starts being dragged.
- `drag`: Called while grid item is being dragged.
- `dragstop`: Called after user is done moving the item.
- `dropped`: Called when an item has been dropped and accepted over a grid.
- `enable`: Called when grid becomes enabled.
- `removed`: Called when items are being removed from the grid.
- `resizestart`: Called before user starts resizing an item.
- `resize`: Called while grid item is being resized.
- `resizestop`: Called after user is done resizing the item.

### Example
```javascript
// Listen to multiple events at once
grid.on('added removed change', (event, items) => {
  items.forEach(item => console.log('Item changed:', item));
});

// Listen to individual events
grid.on('added', (event, items) => {
  items.forEach(item => console.log('Added item:', item));
});
```
```

--------------------------------

### Define Grid 1 Initial State

Source: https://gridstackjs.com/demo/react-hooks-controlled-multiple.html

JSON array defining the initial position and dimensions for items in the first grid.

```json
[
  {
    "id": "item-1-1",
    "x": 0,
    "y": 0,
    "w": 2,
    "h": 2
  },
  {
    "id": "item-1-2",
    "x": 2,
    "y": 0,
    "w": 2,
    "h": 2
  }
]
```

--------------------------------

### prepend

Source: https://gridstackjs.com/angular/doc/html/interfaces/gridstack.component.GridCompHTMLElement.html

Inserts nodes before the first child.

```APIDOC
## prepend

### Description
Inserts nodes before the first child of the node, replacing strings with Text nodes.

### Parameters
- **nodes** (...(string | Node)[]) - Required - The nodes or strings to prepend.
```

--------------------------------

### NgGridStackOptions

Source: https://gridstackjs.com/angular/doc/html/interfaces/types.NgGridStackOptions.html

Configuration interface for initializing GridStack in an Angular environment.

```APIDOC
## Interface: NgGridStackOptions

### Description
Extended GridStackOptions interface for Angular integration. Supports Angular-specific widget definitions and nested grids.

### Properties
- **children** (NgGridStackWidget[]) - Optional - Array of Angular widget definitions for initial grid setup.
- **subGridOpts** (NgGridStackOptions) - Optional - Configuration for nested sub-grids (Angular-aware).
```

--------------------------------

### enableMove(doEnable: boolean, recurse?: boolean)

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Enables/disables widget moving for all widgets.

```APIDOC
## enableMove(doEnable: boolean, recurse?: boolean)

### Description
Enables/disables widget moving for all widgets. No-op for static grids.

### Parameters
- **doEnable** (boolean) - Required - if true widgets will be movable, if false moving is disabled.
- **recurse** (boolean) - Optional - if true (default), sub-grids also get updated.

### Returns
- **GridStack** - the grid instance for chaining
```

--------------------------------

### attachShadow

Source: https://gridstackjs.com/angular/doc/html/interfaces/gridstack.component.GridCompHTMLElement.html

Creates a shadow root for the element.

```APIDOC
## attachShadow(init)

### Description
Creates a shadow root for element and returns it.

### Parameters
- **init** (ShadowRootInit) - Required

### Returns
- **ShadowRoot**
```

--------------------------------

### on(name: string, callback: Function)

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Registers an event handler for grid events such as added, change, drag, or resize.

```APIDOC
## on(name: string, callback: Function)

### Description
Register event handler for grid events. Supported events include added, change, disable, dragstart, drag, dragstop, dropped, enable, removed, resizestart, resize, and resizestop.

### Parameters
- **name** (string) - Required - Event name(s) to listen for (space separated for multiple)
- **callback** (Function) - Required - Function to call when event occurs

### Returns
- **GridStack** - The grid instance for chaining.
```

--------------------------------

### on(event, callback)

Source: https://gridstackjs.com/doc/html/classes/DDDroppable.html

Registers an event listener for drop-related events.

```APIDOC
## on(event: "drop" | "dropover" | "dropout", callback: (event: DragEvent) => void)

### Description
Registers a callback function to be executed when a specific drag and drop event occurs.

### Parameters
- **event** ("drop" | "dropover" | "dropout") - Required - The event name to listen for.
- **callback** (Function) - Required - The function to execute when the event is triggered.
```

--------------------------------

### Methods

Source: https://gridstackjs.com/doc/html/classes/DDDraggable.html

Methods for managing the lifecycle and event handling of the draggable element.

```APIDOC
## destroy()

### Description
Cleans up resources, removes event handlers, and destroys the drag and drop implementation.

## disable(forDestroy?: boolean)

### Description
Disables the drag and drop functionality.

## enable()

### Description
Enables the drag and drop functionality.

## on(event: DDDragEvent, callback: (event: DragEvent) => void)

### Description
Registers a callback function for a specific drag event.

## off(event: DDDragEvent)

### Description
Unregisters a previously registered event callback.

## updateOption(opts: DDDragOpt)

### Description
Updates the configuration options for the draggable instance.
```

--------------------------------

### Define Grid 2 Initial State

Source: https://gridstackjs.com/demo/react-hooks-controlled-multiple.html

JSON array defining the initial position for items in the second grid.

```json
[
  {
    "id": "item-2-1",
    "x": 0,
    "y": 0
  },
  {
    "id": "item-2-2",
    "x": 0,
    "y": 1
  },
  {
    "id": "item-2-3",
    "x": 1,
    "y": 0
  }
]
```

--------------------------------

### GridStack Instance Properties

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Key properties available on a GridStack instance for managing grid state and configuration.

```APIDOC
## Instance Properties

- **el** (GridHTMLElement) - The HTML element tied to this grid after initialization.
- **engine** (GridStackEngine) - The engine used to implement non-DOM grid functionality.
- **opts** (GridStackOptions) - The current grid options. Note: Use methods to modify these rather than direct assignment.
- **parentGridNode** (GridStackNode) - Reference to a parent grid item if the grid is nested.
```

--------------------------------

### focus

Source: https://gridstackjs.com/angular/doc/html/interfaces/gridstack.component.GridCompHTMLElement.html

Sets focus to the element.

```APIDOC
## focus

### Description
Sets focus to the current element.

### Parameters
- **options** (FocusOptions) - Optional - Options for focusing the element.
```

--------------------------------

### enableResize(doEnable: boolean, recurse?: boolean)

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Enables/disables widget resizing for all widgets.

```APIDOC
## enableResize(doEnable: boolean, recurse?: boolean)

### Description
Enables/disables widget resizing for all widgets. No-op for static grids.

### Parameters
- **doEnable** (boolean) - Required - if true widgets will be resizable, if false resizing is disabled.
- **recurse** (boolean) - Optional - if true (default), sub-grids also get updated.

### Returns
- **GridStack** - the grid instance for chaining
```

--------------------------------

### GridStackOptions Interface

Source: https://gridstackjs.com/doc/html/interfaces/GridStackOptions.html

The GridStackOptions interface defines the configuration object used to initialize and customize a grid layout.

```APIDOC
## Interface GridStackOptions

### Description
Defines the configuration options for a GridStack instance.

### Properties
- **acceptWidgets** (string | boolean | (element: Element) => boolean) - Optional - Allows widgets to be accepted into the grid.
- **alwaysShowResizeHandle** (boolean | "mobile") - Optional - Determines if resize handles are always visible.
- **animate** (boolean) - Optional - Enables animations for widget movements.
- **auto** (boolean) - Optional - Enables auto-positioning of widgets.
- **cellHeight** (numberOrString) - Optional - Sets the height of grid cells.
- **cellHeightThrottle** (number) - Optional - Throttle time for cell height updates.
- **cellHeightUnit** (string) - Optional - CSS unit for cell height.
- **children** (GridStackWidget[]) - Optional - Initial list of widgets in the grid.
- **class** (string) - Optional - CSS class for the grid container.
- **column** (number | "auto") - Optional - Number of columns in the grid.
- **columnOpts** (Responsive) - Optional - Responsive column configuration.
- **disableDrag** (boolean) - Optional - Disables drag functionality.
- **disableResize** (boolean) - Optional - Disables resize functionality.
- **draggable** (DDDragOpt) - Optional - Configuration for drag behavior.
- **engineClass** (typeof GridStackEngine) - Optional - Custom engine class.
- **float** (boolean) - Optional - Enables floating widgets.
- **handle** (string) - Optional - Selector for the drag handle.
- **handleClass** (string) - Optional - CSS class for the drag handle.
- **itemClass** (string) - Optional - CSS class for grid items.
- **layout** (ColumnOptions) - Optional - Layout configuration.
- **lazyLoad** (boolean) - Optional - Enables lazy loading.
- **margin** (numberOrString) - Optional - Margin for grid items.
- **marginBottom** (numberOrString) - Optional - Bottom margin.
- **marginLeft** (numberOrString) - Optional - Left margin.
- **marginRight** (numberOrString) - Optional - Right margin.
- **marginTop** (numberOrString) - Optional - Top margin.
- **marginUnit** (string) - Optional - CSS unit for margins.
- **maxRow** (number) - Optional - Maximum number of rows.
- **minRow** (number) - Optional - Minimum number of rows.
- **nonce** (string) - Optional - Nonce for CSP.
- **placeholderClass** (string) - Optional - CSS class for the placeholder.
- **placeholderText** (string) - Optional - Text for the placeholder.
- **removable** (string | boolean) - Optional - Enables widget removal.
- **removableOptions** (DDRemoveOpt) - Optional - Configuration for removal behavior.
- **resizable** (DDResizeOpt) - Optional - Configuration for resize behavior.
- **row** (number) - Optional - Initial number of rows.
- **rtl** (boolean | "auto") - Optional - Enables Right-to-Left support.
- **sizeToContent** (boolean) - Optional - Enables sizing to content.
- **staticGrid** (boolean) - Optional - Makes the grid static.
- **styleInHead** (boolean) - Optional - Injects styles into the document head.
- **subGridDynamic** (boolean) - Optional - Enables dynamic sub-grids.
- **subGridOpts** (GridStackOptions) - Optional - Configuration for sub-grids.
```

--------------------------------

### GridStack Static Utilities

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Accessing static utility methods and engine constructors provided by the GridStack class.

```APIDOC
## GridStack.Engine

### Description
Allows users to instantiate a new grid engine instance.

### Usage
`new GridStack.Engine(columnCount)`

## GridStack.Utils

### Description
Provides access to internal utility functions such as sorting.

### Usage
`GridStack.Utils.sort()`
```

--------------------------------

### updateOptions(o: GridStackOptions)

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Updates the grid-level configuration options.

```APIDOC
## updateOptions(o: GridStackOptions)

### Description
Updates the passed in options on the grid.

### Parameters
- **o** (GridStackOptions) - Required - The new grid options to apply.

### Returns
- **GridStack** - The grid instance.
```

--------------------------------

### makeSubGrid

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Converts an existing grid item element into a sub-grid.

```APIDOC
## makeSubGrid(el, ops, nodeToAdd, saveContent)

### Description
Convert an existing gridItem element into a sub-grid with the given (optional) options, else inherit them from the parent's subGrid options.

### Parameters
- **el** (GridItemHTMLElement) - GridItem element to convert
- **ops** (GridStackOptions) - Optional. Sub-grid options.
- **nodeToAdd** (GridStackNode) - Optional. Node to add to the newly created sub grid.
- **saveContent** (boolean) - Optional. If true (default), the html inside .grid-stack-content will be saved to child widget.

### Returns
- **GridStack** - Newly created grid
```

--------------------------------

### getGridItems

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Returns an array of grid HTML elements.

```APIDOC
## getGridItems(): GridItemHTMLElement[]

### Description
Returns an array of grid HTML elements (no placeholder) - used to iterate through our children in DOM order.
```

--------------------------------

### Gridstack Component Configuration

Source: https://gridstackjs.com/angular/doc/html/index.html

TypeScript implementation for registering custom components and configuring grid options with dynamic content.

```typescript
import { Component } from '@angular/core';  
import { GridStack, GridStackOptions } from 'gridstack';  
import { GridstackComponent, gsCreateNgComponents, NgGridStackWidget, nodesCB, BaseWidget } from 'gridstack/dist/angular';  
  
// some custom components  
@Component({  
  selector: 'app-a',  
  template: 'Comp A {{text}}',  
})  
export class AComponent extends BaseWidget implements OnDestroy {  
  @Input() text: string = 'foo'; // test custom input data  
  public override serialize(): NgCompInputs | undefined  { return this.text ? {text: this.text} : undefined; }  
  ngOnDestroy() {  
    console.log('Comp A destroyed'); // test to make sure cleanup happens  
  }  
}  
  
@Component({  
  selector: 'app-b',  
  template: 'Comp B',  
})  
export class BComponent extends BaseWidget {  
}  
  
// ...in your module (classic), OR your ng19 app.config provideEnvironmentInitializer call this:  
constructor() {  
  // register all our dynamic components types created by the grid  
  GridstackComponent.addComponentToSelectorType([AComponent, BComponent]) ;  
}  
  
// now our content will use Components instead of dummy html content  
public gridOptions: NgGridStackOptions = {  
  margin: 5,  
  minRow: 1, // make space for empty message  
  children: [ // or call load()/addWidget() with same data  
    {x:0, y:0, minW:2, selector:'app-a'},  
    {x:1, y:0, minW:2, selector:'app-a', input: { text: 'bar' }}, // custom input that works using BaseWidget.deserialize() Object.assign(this, w.input)  
    {x:2, y:0, selector:'app-b'},  
    {x:3, y:0, content:'plain html'},  
  ]  
}  
  
// called whenever items change size/position/etc.. see other events  
public onChange(data: nodesCB) {  
  console.log('change ', data.nodes.length > 1 ? data.nodes : data.nodes[0]);  
}
```

--------------------------------

### constructor

Source: https://gridstackjs.com/doc/html/classes/DDDraggable.html

Creates a new instance of DDDraggable associated with a specific DOM element.

```APIDOC
## constructor(el: GridItemHTMLElement, option?: DDDragOpt)

### Description
Initializes a new drag and drop implementation for the provided HTML element.

### Parameters
- **el** (GridItemHTMLElement) - Required - The DOM element to make draggable.
- **option** (DDDragOpt) - Optional - Configuration options for the drag behavior.
```

--------------------------------

### save

Source: https://gridstackjs.com/doc/html/classes/GridStackEngine.html

Saves the current grid layout for serialization.

```APIDOC
## save(saveElement?: boolean, saveCB?: SaveFcn, column?: number): GridStackNode[]

### Description
Saves a copy of the layout, returning a list of widgets for serialization.

### Parameters
- **saveElement** (boolean) - Optional - If true (default), the element will be saved to GridStackWidget.el field.
- **saveCB** (SaveFcn) - Optional - Callback for each node to insert additional data.
- **column** (number) - Optional - If provided, the grid will be saved for the given column count.
```

--------------------------------

### updateAll

Source: https://gridstackjs.com/angular/doc/html/classes/gridstack.component.GridstackComponent.html

Updates the grid layout when the template list of items changes.

```APIDOC
## updateAll(): void

### Description
Called when the template list of items changes. It retrieves a list of nodes and updates the layout accordingly, handling additions or removals of items.
```

--------------------------------

### Add a new widget to the grid

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Use this method to programmatically add a widget. Check if the widget fits using willItFit() before calling.

```javascript
const grid = GridStack.init();  
grid.addWidget({w: 3, content: 'hello'});
```

--------------------------------

### Check size-to-content with Utils.shouldSizeToContent

Source: https://gridstackjs.com/doc/html/classes/Utils.html

Determines if a grid node should resize to fit its content, optionally using strict mode.

```javascript
if (Utils.shouldSizeToContent(node)) {  
  // Trigger content-based resizing  
}
```

--------------------------------

### constructor(el: GridItemHTMLElement, option?: DDResizableOpt)

Source: https://gridstackjs.com/doc/html/classes/DDResizable.html

Creates a new instance of DDResizable associated with a specific HTML element.

```APIDOC
## constructor(el: GridItemHTMLElement, option?: DDResizableOpt)

### Description
Initializes a new DDResizable instance for the provided HTML element with optional configuration.

### Parameters
- **el** (GridItemHTMLElement) - Required - The HTML element to be made resizable.
- **option** (DDResizableOpt) - Optional - Configuration options for the resizable behavior.

### Returns
- **DDResizable** - The initialized instance.
```

--------------------------------

### resizeToContent(el)

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Updates a widget's height to match its content height.

```APIDOC
## resizeToContent(el)

### Description
Updates widget height to match the content height to avoid vertical scrollbars or dead space. This automatically adjusts the widget height based on its content size.

### Parameters
- **el** (GridItemHTMLElement) - Required - The grid item element to resize.

### Returns
- **void**
```

--------------------------------

### el

Source: https://gridstackjs.com/angular/doc/html/classes/gridstack.component.GridstackComponent.html

Retrieve the native DOM element associated with the grid.

```APIDOC
## el

### Description
Get the native DOM element that contains grid-specific fields. This element has GridStack properties attached to it.

### Signature
- **get el()**: GridCompHTMLElement

### Returns
- **GridCompHTMLElement** - The native DOM element.
```

--------------------------------

### batchUpdate

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Optimizes performance by preventing intermediate relayouts during multiple widget additions.

```APIDOC
## batchUpdate

### Description
Use before calling multiple addWidget() calls to prevent unnecessary relayouts. Changes are only processed when batchUpdate(false) is called.

### Parameters
- **flag** (boolean) - Optional - Set to true to start batching, false to end it.
```

--------------------------------

### clearOptions()

Source: https://gridstackjs.com/angular/doc/html/classes/gridstack-item.component.GridstackItemComponent.html

Clears the initial options after the grid item has been built.

```APIDOC
## clearOptions()

### Description
Clears the initial options now that the component has been built.

### Returns
- **void**
```

--------------------------------

### addWidget

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Adds a new widget to the grid.

```APIDOC
## addWidget

### Description
Adds a new widget to the grid and returns the corresponding DOM element. Note that the widget will be placed regardless of grid height; use willItFit() for validation.

### Parameters
- **w** (GridStackWidget) - Required - The widget definition to add.

### Returns
- **GridItemHTMLElement** - The added widget element.

### Example
```javascript
const grid = GridStack.init();
grid.addWidget({w: 3, content: 'hello'});
```
```

--------------------------------

### createWidgetDivs(n: GridStackNode)

Source: https://gridstackjs.com/doc/html/classes/GridStack.html

Create the default grid item divs and content by using GridStack.renderCB().

```APIDOC
## createWidgetDivs(n: GridStackNode)

### Description
Create the default grid item divs and content (possibly lazy loaded) by using GridStack.renderCB().

### Parameters
- **n** (GridStackNode) - Required - GridStackNode definition containing widget configuration.

### Returns
- **HTMLElement** - the created HTML element with proper grid item structure
```
Tokens:
Raw