### 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
``` -------------------------------- ### 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: //
grid.el.innerHTML = '
'; // 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 ### 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 ```