Method makeWidget

src/gridstack.ts:1256–1281

* If you add elements to your grid by hand (or have some framework creating DOM), you have to tell gridstack afterwards to make them widgets. * If you want gridstack to add the elements for you, use `addWidget()` instead. * Makes the given element a widget and returns it. * * @param els

(els: GridStackElement, options?: GridStackWidget)

   * grid.makeWidget(element, {x: 0, y: 1, w: 4, h: 2});
   */
  public makeWidget(els: GridStackElement, options?: GridStackWidget): GridItemHTMLElement {
    const el = GridStack.getElement(els);
    if (!el || el.gridstackNode) return el;
    if (!el.parentElement) this.el.appendChild(el);
    this._prepareElement(el, true, options);
    const node = el.gridstackNode;

    this._updateContainerHeight();

    // see if there is a sub-grid to create
    if (node.subGridOpts) {
      this.makeSubGrid(el, node.subGridOpts, undefined, false); // node.subGrid will be used as option in method, no need to pass
    }

    // if we're adding an item into 1 column make sure
    // we don't override the larger 12 column layout that was already saved. #1985
    let resetIgnoreLayoutsNodeChange: boolean;
    if (this.opts.column === 1 && !this._ignoreLayoutsNodeChange) {
      resetIgnoreLayoutsNodeChange = this._ignoreLayoutsNodeChange = true;
    }
    this._triggerAddEvent();
    this._triggerChangeEvent();
    if (resetIgnoreLayoutsNodeChange) delete this._ignoreLayoutsNodeChange;

    return el;
  }

  /**
   * Register event handler for grid events. You can call this on a single event name, or space separated list.