Add widget returns ERROR ReferenceError: domAttr is not defined

[ianadavies]

Error when adding widget

    at GridStack.addWidget (gridstack.js:1492)
    at ResultsTableComponent.ngAfterViewInit (results-table.component.ts:53)
    at callHook (core.js:3037)
    at callHooks (core.js:3007)
    at executeInitAndCheckHooks (core.js:2959)
    at refreshView (core.js:7386)
    at refreshEmbeddedViews (core.js:8407)
    at refreshView (core.js:7339)
    at refreshEmbeddedViews (core.js:8407)
    at refreshView (core.js:7339)

Your environment

• Angular 10
• gridstack.js is 1.1.2
• Chrome : Latest

NB : I am not using any of the Angular wrappers as these do not work with the latest version of GridStack

Steps to reproduce

NB: I tried to do this in stackblitz here

https://stackblitz.com/edit/angular-ivy-xacnjl

but unfortunately the scripts settings in angular.json does not seem to work so I just get

ERROR TypeError: $ is not a function
    at Function.GridStack.init (gridstack.js:2109)

Create simple Angular App npm install gridstack@1.1.2

add following lines to angular.json

"scripts": [
              "node_modules/gridstack/dist/gridstack.all.js",
            ]

import {
  Component,
  ViewEncapsulation,
  ChangeDetectionStrategy,
  OnInit,
  OnDestroy,
  AfterViewInit,
  ElementRef
} from '@angular/core';
import 'gridstack';

@Component({
  selector: 'results-table',
  template: `
      <div class="grid-stack" id="results-grid">
      </div> `,
  styleUrls: ['./results-table.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ResultsTableComponent implements OnInit, OnDestroy, AfterViewInit {
  private GridStack: GridStack = window[`GridStack`];
  constructor() {
  }

  public ngOnInit(): void {
  }

  public ngAfterViewInit() {
    const grid = this.GridStack.init({}, '#results-grid');
    grid.addWidget('<div><div class="grid-stack-item-content"> test </div></div>', {width: 2});
  }
}

Expected behaviour

Adds a widget

Actual behaviour

core.js:4196 ERROR ReferenceError: domAttr is not defined
    at GridStack.addWidget (gridstack.js:1492)

[adumesny]

would be good to have a working sample - just create a working application zip folder and upload it here. But looking at the code it looks like it's just missing var to define local variable.

      // make sure we load any DOM attributes that are not specified in passed in options (which override)
      domAttr = this._readAttr(el);
      Utils.defaults(opt, domAttr);

maybe fix your local copy (include the individual files - see https://github.com/gridstack/gridstack.js#jquery-application) and let me know if that fixes it.

[ianadavies]

Adding var has fixed the error yes, but the grid is dead with no ability to re-size or move widgets. There are no error messages

[gregid]

@ianadavies try the following imports instead:

import 'gridstack/dist/jquery';
import 'gridstack/dist/jquery-ui';
import 'gridstack/dist/gridstack';
import 'gridstack/dist/gridstack.jQueryUI';
import 'gridstack/dist/gridstack-poly.min.js';

import 'gridstack/dist/gridstack.css';

[ianadavies]

@gregid really want to avoid the JQuery dependency and use the latest version to be honest.

[gregid]

@ianadavies you won't be able to do it at the moment without jQuery - there is an ongoing work on typescript branch for v2.0 but for now we are stuck with the above.

[ianadavies]

Ok this text on the home page is a bit miss-leading then

Migrating to v1.0.0 v1.0.0 removed Jquery from the API and external dependencies, which will require some code changes. Here is a list of the changes:

see Migrating to v0.6.x if you didn't already

your code only needs to include gridstack.all.js and gristack.css (don't include other JS) and is recommended you do that as internal dependencies will change over time. If you are jquery based, also see note below.

[adumesny]

@ianadavies in 1.x I removed JQ from the API so that code can start migrating away from using it without affecting applications (it's just an internal dependency after all) , but is a ton of re-write to completely remove it. The Typescript 2.x branch (re-write) has it removed from the main code, but the drag&drop (which is all in the small gridstack.jQueryUI class) still uses JQUI to do it and will eventually be replaced with an HMTL5 plugin - we support multiple plugins but we need an HTML5 version and let apps use whichever they want (JQUI version of today will likely have more functionality). You can read more in 1084

[ianadavies]

Ok, So not really sure where I would have these imports in my Angular App

import 'gridstack/dist/jquery';
import 'gridstack/dist/jquery-ui';
import 'gridstack/dist/gridstack';
import 'gridstack/dist/gridstack.jQueryUI';
import 'gridstack/dist/gridstack-poly.min.js';

Do I need to add these scripts to my angular.json? So instead of

 "scripts": [
              "node_modules/gridstack/dist/gridstack.all.js",
            ]

have this ?

import 'gridstack/dist/gridstack.css';
 "scripts": [
              "node_modules/gridstack/dist/jquery.js",
              "node_modules/gridstack/dist/gridstack.js",
              "node_modules/gridstack/dist/gridstack.jQueryUI.js",
              "node_modules/gridstack/dist/gridstack-poly.min.js"
           ]

[adumesny]

I worked with Ian to add

import 'gridstack/dist/jquery';
import 'gridstack/dist/jquery-ui';
import 'gridstack/dist/gridstack';
import 'gridstack/dist/gridstack.jQueryUI';

to his .ts file instead of angular.json and working now