Implementing Gridstack 3 in Angular

Question

I'm following this example, trying to implement it in Angular.

I import as follows (no jQuery dependencies):

import * as GridStack from 'gridstack/dist/gridstack-h5';

And the code

ngAfterViewInit() {
    
  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);
}

But all I see is static divs instead of a grid, and there are no errors. What's missing?

<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/> ? — enno.void
– enno.void, Commented Jan 7, 2021 at 12:04

Transformer · Accepted Answer · 2021-03-29 05:07:09Z

2

+100

Please post your HTML template.

Double check your config from GridStack Read Me, if you are using an ngfor then you need to see step 3 and invoke this on your main div $('.grid-stack').gridstack();

You must install:

yarn add gridstack
// or
npm install --save gridstack

You must import it into angular component 2A or 2B for HTML:

2A For your answer Typescript like so:

import 'gridstack/dist/gridstack.min.css';
import GridStack from 'gridstack';

You should now have gridstack-h5.js gridstack native js version like here

2B For others lookging to do it in HTML optional, like so:

<script src="node_modules/gridstack/dist/gridstack-h5.js"></script>

<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>

What is your HTML template, like here

  ngAfterViewInit() {
        setTimeout(() => {
            $('.grid-stack').gridstack();
            this.gridStack = $('.grid-stack').data('gridstack');
        }, 300); //This MUST finish after dynamic data is retrieved for ngfor, and calling these statements in another area just doesn't work
    }

edited Mar 29, 2021 at 5:07

answered Jan 11, 2021 at 19:19

Transformer

7,5093 gold badges29 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

ps0604 Over a year ago

Am I forced to use jQuery? The idea of Gridstack 3 is to eliminate the dependency

Transformer Over a year ago

if you look at my post, you will see three options in step 4 this is native but also very new import 'gridstack/dist/h5/gridstack-dd-native'; . So, to test I would try the other two imports as well one at a time.

pbachman Over a year ago

meanwhile Gridstack is JQuery free, please look at github.com/gridstack/gridstack.js/blob/develop/…

Transformer Over a year ago

if you use the option I mentioned above in step 4

E.Tiake Over a year ago

I did not understand why the scripts property has to reference jquery. The question is about implementation without jquery. Can you make an example jquery free?

|

Collectives™ on Stack Overflow

Implementing Gridstack 3 in Angular

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related