Angular-gridster2: Widgets not rendered properly with default css, also widgets following mouse even after drop.

[shivam25]

Hello Tiberiu, I tried using angular-gridster2 for my dashboard app, which is having some huge widgets including interactive maps n all. Listing below challenges I faced while using it:-
1) First tried simply using plain html(removing all widgets) as described in the example.
--- The widgets didn'nt load properly and there was a lot flickering (it jumping b/w mobile and desktop css classes I observed). Needed to overide the css as below to fix: .fixed{ position: absolute; }. It was relative by default.

2) Disabled pusing, enabled swapping, resizing and drag. It is working fine but suddenly some widget just sticks to the mouse movement and keeps following even after drop. Below is the console error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'setPushedItems' of undefined
TypeError: Cannot read property 'setPushedItems' of undefined
    at GridsterResizable.webpackJsonp.../../../../angular-gridster2/dist/gridsterResizable.service.js.GridsterResizable.makeResize (vendor.bundle.js:9099)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.bundle.js:6228)
    at Object.onInvoke (vendor.bundle.js:126671)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.bundle.js:6227)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (polyfills.bundle.js:5978)
    at polyfills.bundle.js:6698
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:6261)
    at Object.onInvokeTask (vendor.bundle.js:126662)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:6260)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (polyfills.bundle.js:6028)
    at GridsterResizable.webpackJsonp.../../../../angular-gridster2/dist/gridsterResizable.service.js.GridsterResizable.makeResize (vendor.bundle.js:9099)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.bundle.js:6228)
    at Object.onInvoke (vendor.bundle.js:126671)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.bundle.js:6227)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (polyfills.bundle.js:5978)
    at polyfills.bundle.js:6698
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:6261)
    at Object.onInvokeTask (vendor.bundle.js:126662)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:6260)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (polyfills.bundle.js:6028)
    at resolvePromise (polyfills.bundle.js:6649)
    at polyfills.bundle.js:6701
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:6261)
    at Object.onInvokeTask (vendor.bundle.js:126662)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:6260)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (polyfills.bundle.js:6028)
    at drainMicroTaskQueue (polyfills.bundle.js:6435)
    at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (polyfills.bundle.js:6340)
    at invokeTask (polyfills.bundle.js:7357)
    at HTMLDocument.globalZoneAwareCallback (polyfills.bundle.js:7394)

Your help is needed on this on priority as my dashboard deadline is near :)

[tiberiuzuld]

Hi @shivam25 ,

1. is very strange since demo is working without a problem. Please provide a GIF/example.
2. Will look over the error and try to have a fix for you today.

[shivam25]

Hello @tiberiuzuld , thankyou for replying so promptly.
U can check here .
Just try removing the extra css I have added. or try changing the position from absolute to relative.

For dragging issue, however, I was not able to reproduce in above example. But, providing you some more logs for same:
'''
ERROR TypeError: Cannot read property 'x' of undefined
at GridsterDraggable.webpackJsonp.../../../../angular-gridster2/dist/gridsterDraggable.service.js.GridsterDraggable.calculateItemPosition (gridsterDraggable.service.js:159)
at GridsterDraggable.webpackJsonp.../../../../angular-gridster2/dist/gridsterDraggable.service.js.GridsterDraggable.calculateItemPositionFromMousePosition (gridsterDraggable.service.js:86)
at GridsterDraggable.webpackJsonp.../../../../angular-gridster2/dist/gridsterDraggable.service.js.GridsterDraggable.dragMove (gridsterDraggable.service.js:78)
at HTMLDocument. (platform-browser.js:2628)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4724)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)
at invokeTask (zone.js:1517)
'''

[tiberiuzuld]

So in your example made this changes and works as expected:

// app.component.css
:host{
  width: 100%;
  height: 100%;
}
// delete rest in this file

// styles.css

html, body, #blitz-app {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

The issue was because the container of the gridster needs to have height.
Gridster will go to 100% of parent.
Also drag and drop seems to work without any errors.

[shivam25]

Hi @tiberiuzuld , Thanku for the hint. It worked for point no. 1 :)

Though the issue2 is still there. To debug, I just replaced the inner content of each with plain html just. Then surprisingly it started working fine.
So, just to inform you, I am using bootstrap4, D3.js v4 and tom-tom maps api(its in iframe) in my widgets. Does this makes any compatibility problem ?
The issue is same in firefox and chrome. Attaching an image below.

[tiberiuzuld]

The second issue will need to investigate.
You currently have 2 different errors:

• Cannot read property 'setPushedItems' of undefined in GridsterResizable.makeResize
• Cannot read property 'x' of undefined in GridsterDraggable.calculateItemPosition

Both errors are strange.
The content of the items should not interfere with the drag and resize.

[tiberiuzuld]

Can't seem to reproduce your issues.
Can you paste your config please.
And do you use:

<gridster-item>
  <div class="gridster-item-content">
      Some content to select and click without dragging the widget
  </div>

For your widgets ?

[shivam25]

Hello @tiberiuzuld , Plz find the config below:

this.options = {
            gridType: 'verticalFixed',
            fixedColWidth: 40, // fixed col width for gridType: 'fixed'
            fixedRowHeight: 133, // fixed row height for gridType: 'fixed'
            mobileBreakpoint: 700,
            compactType: 'compactLeft&Up',
            minCols: 1, // minimum amount of columns in the grid
            maxCols: 9, // maximum amount of columns in the grid
            minRows: 1, // minimum amount of rows in the grid
            maxRows: 8, // maximum amount of rows in the grid
            defaultItemCols: 1, // default width of an item in columns
            defaultItemRows: 1, // default height of an item in rows
            maxItemCols: 9, // max item number of cols
            maxItemRows: 8, // max item number of rows
            minItemCols: 1, // min item number of columns
            minItemRows: 1, // min item number of rows
            minItemArea: 1, // min item area: cols * rows
            maxItemArea: 72, // max item area: cols * rows
            emptyCellDragMaxCols: 2, // limit empty cell drag max cols
            emptyCellDragMaxRows: 2, // limit empty cell drag max rows
            margin: 5,  // margin between grid items
            outerMargin: true,  // if margins will apply to the sides of the container
            displayGrid: 'none',
            draggable: {
                enabled: true,
                ignoreContentClass: 'gridster-item-content', // default content class to ignore the drag event from
                ignoreContent: true, // if true drag will start only from elements from `dragHandleClass`
                dragHandleClass: 'drag-handler', // drag event only from this class. If `ignoreContent` is true.
                stop: AppComponent.eventStop,
                start: AppComponent.eventStart
            },
            resizable: {
                enabled: true,
                stop: AppComponent.eventStop,
                start: AppComponent.eventStart
            },
            swap: true, // allow items to switch position if drop on top of another
            pushItems: false, // push items when resizing and dragging
            disablePushOnDrag: true, // disable push on drag
            disablePushOnResize: true, // disable push on resize
            pushDirections: {north: false, east: false, south: false, west: false}, // control the directions items are pushed
            keepFixedHeightInMobile: false, // keep the height from fixed gridType in mobile layout
            disableWindowResize: false,
            keepFixedWidthInMobile: false // keep the width from fixed gridType in mobile layout
        };

[tiberiuzuld]

And do you use the class gridster-item-content ? for your wdigets:

<gridster-item>
  <div class="gridster-item-content">
      Some content to select and click without dragging the widget
  </div>
</gridster-item>

[shivam25]

Yes. Please find html for a widget I am using:

<div id="traffic_flow" id="gridster-item-content">
  <div class="card card-border p-1">
  <div class="card-header text-capitalize text-white font-weight-bold p-1 drag-handler">
    Traffic Flow</div>
    <div class="row no-gutters">
      <iframe id="traffic_flow_map" title="Traffic flow map" src="./assets/trafficFlowMap.html"></iframe>
    </div>
  </div>
</div>

[tiberiuzuld]

You should have class not 2 id's

<div id="traffic_flow" id="gridster-item-content">

[mehdiElma]

Hello,
I have the same issue as shivam25 :
"Cannot read property 'x' of undefined in GridsterDraggable.calculateItemPosition"

I configured gridster as you said but error is still there. Have you find any solution ?

Regards.

[tiberiuzuld]

Hi @mehdiElma ,
I was not able to reproduce the issue.
Please provide options and widgets.
Specify what version of library you use.
Specify what version of angular you use.

Thanks

[mehdiElma]

Hi @tiberiuzuld,
I can't figure out how to reproduce this issue too but it still happened sometimes so it's very difficult to find a solution... However, my options are :

this.gridsterOpts = {
      gridType: 'fixed',
      fixedColWidth: 105, 
      fixedRowHeight: 105, 
      keepFixedHeightInMobile: false, 
      keepFixedWidthInMobile: false,
      compactType: 'none', 
      mobileBreakpoint: 640, 
      minCols: 1, 
      maxCols: 100, 
      minRows: 1,
      maxRows: 100, 
      defaultItemCols: 1,
      defaultItemRows: 1, 
      maxItemCols: 100,
      maxItemRows: 100, 
      minItemCols: 1, 
      minItemRows: 1, 
      minItemArea: 1, 
      maxItemArea: 2500,
      margin: 5,
      outerMargin: true,  
      scrollSensitivity: 10,  
      scrollSpeed: 20,  
      itemResizeCallback: undefined, 
      itemInitCallback: undefined,
      enableEmptyCellClick: false, 
      enableEmptyCellContextMenu: false, 
      enableEmptyCellDrop: false,
      enableEmptyCellDrag: false, 
      emptyCellClickCallback: undefined,
      emptyCellContextMenuCallback: undefined, 
      emptyCellDropCallback: undefined,
      emptyCellDragCallback: undefined,
      emptyCellDragMaxCols: 50, 
      emptyCellDragMaxRows: 50, 
      draggable: {
        enabled: this.isEditMode, 
        ignoreContentClass: 'gridster-item-content', 
        ignoreContent: false, 
        dragHandleClass: 'drag-handler', 
        stop: undefined, 
        start: undefined 
      },
      resizable: {
        enabled: this.isEditMode,
        handles: {
          s: true,
          e: true,
          n: true,
          w: true,
          se: true,
          ne: true,
          sw: true,
          nw: true
        }, 
        stop: undefined,
        start: undefined 
      },
      swap: false, 
      pushItems: true, 
      pushResizeItems: false, 
      disablePushOnDrag: false,
      disablePushOnResize: false,
      pushDirections: { north: true, east: true, south: true, west: true }, 
      displayGrid: 'onDrag&Resize', 
      disableWindowResize: false, 
      disableWarnings: false,
      scrollToNewItems: false 
    };

My widget is :

<div class="main-content">
  <gridster [options]="gridsterOpts" #gridster1>
    <gridster-item [item]="card" *ngFor="let card of selectedSubMenu?.cards; let i = index;">
    [...]
    </gridster-item>
  </gridster>
</div>

I use angular-gridster2 version 3.12.0 and angular 4.4.4.

Thanks in advance for yours support !

[tiberiuzuld]

Well was testing on latest version and was not able to reproduce the issue.

Try update to latest version.
for 3.x latest is 3.18.2
for 4.x latest is 4.4.2

Then tell me if you have any issues.

[mehdiElma]

Hi @tiberiuzuld, I was able to reproduce my issue with my configuration. To reproduce it you need to have a vertical scrollbar inside a gridter's item. Then click inside the scrollbar and don't release the click, then move the item to dragg it onto another place : issue will reproduce at this moment.

Thanks for your support !

[tiberiuzuld]

Still can't reproduce the issue.

[mehdiElma]

That's because you need to click (mouse cursor) over item's scrollbar and then drag drag it.

[tiberiuzuld]

Still no error.
If you click on scrollbar the item will not be dragged.
Drag will start but the item will not move and you only scroll.
And who will try to drag from scrollbar ?

Tested on v4.5.0

[tiberiuzuld]

@mehdiElma and @shivam25 the answer from https://github.com/tiberiuzuld/angular-gridster2/issues/233
I think will solve your issue also.

[shivam25]

Thanks @dzhavat, for finding the root cause of the issue and thanks @tiberiuzuld for providing the solution to it. Since the issue was blocker for me I am now using 'angular2gridster' for my project.

[avanishmylari]

i am getting this error while dragging grid item,from one place to another place.

core.js:1440 ERROR Error: Uncaught (in promise): TypeError: Cannot assign to read only property 'cols' of object '[object Object]'
TypeError: Cannot assign to read only property 'cols' of object '[object Object]'
at GridsterItemComponent.checkItemChanges (angular-gridster2.js:4309)
at GridsterDraggable.makeDrag (angular-gridster2.js:3064)
at ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:4733)
at ZoneDelegate.invoke (zone.js:387)
at Zone.run (zone.js:138)
at eval (zone.js:858)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4724)
at ZoneDelegate.invokeTask (zone.js:420)
at resolvePromise (zone.js:809)
at eval (zone.js:861)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4724)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at ZoneTask.invokeTask [as invoke] (zone.js:500)
at invokeTask (zone.js:1517)
at HTMLDocument.globalZoneAwareCallback (zone.js:1543)