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

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:-

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.
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 😃

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 22 (11 by maintainers)

Most upvoted comments

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)

avanishmylari on Nov 20, 2019