angular2gridster
angular2gridster copied to clipboard
swiety85
Save Layout on Exit - Question
Is there a way to export and save the layout after it was initially loaded? Example is after the user moves things around I want to save their changes so I can put it back to the way they left off next time. Thank you!
Hi,
if you use two-way binding (e.g. like in the demo), all changes are reflected on the objects connected to gridster-item component. It's enough to just export these objects. If you don't use two-way binding, you can use (change) event on gridster-item component (that is triggered on every item change) to update objects in your component.
If you want to export positions just after it was initially loaded, you can use (ready) event on gridster component.
Thank you for the reply. I’m playing with the demo but I’m not sure what object I would export. I have a loop like this but the “widgets” object does not get updated what I move items around.
<gridster-item *ngFor="let widget of widgets; let indx = index" #itemComp [options]="itemOptions" [dragAndDrop]="designMode" [resizable]="designMode" [(x)]="widget.x" [(y)]="widget.y" [(xSm)]="widget.xSm" [(ySm)]="widget.ySm" [(xMd)]="widget.xMd" [(yMd)]="widget.yMd" [(xLg)]="widget.xLg" [(yLg)]="widget.yLg" [(xXl)]="widget.xXl" [(yXl)]="widget.yXl" [(w)]="widget.width" [(h)]="widget.height" (change)="itemChange($event, gridster1)">
From: Damian Wajdlich [email protected] Sent: Thursday, May 31, 2018 4:10 PM To: swiety85/angular2gridster [email protected] Cc: Collura, Chuck [email protected]; Author [email protected] Subject: Re: [swiety85/angular2gridster] Save Layout on Exit - Question (#255)
Hi, if you use two-way binding (e.g. like in the demo), all changes are reflected on the objects connected to gridster-item component. It's enough to just export these objects. If you don't use two-way binding, you can use (change) event on gridster-item component (that is triggered on every item change) to update objects in your component. If you want to export positions just after it was initially loaded, you can use (ready) event on gridster component.
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_swiety85_angular2gridster_issues_255-23issuecomment-2D393664029&d=DwMFaQ&c=-7HNwxqfpkdcRXCW8HB54Q&r=YXGuA2OSNJxJ2590vzJtkaaqM9_MGtSLh-z1bJBbao8&m=o9FdJdW82QMtV2nsjZeN_bF4gD9mo8TitHxtWwYqkuw&s=MQVcvkTOCe_MgDiBs-ZMrKHOwW_7OjBrfsGKGMb9gz4&e=, or mute the threadhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_Al9wUrzSHoSTi48MU3L8M4MD6-5FDdeG9sks5t4E4rgaJpZM4UVlfE&d=DwMFaQ&c=-7HNwxqfpkdcRXCW8HB54Q&r=YXGuA2OSNJxJ2590vzJtkaaqM9_MGtSLh-z1bJBbao8&m=o9FdJdW82QMtV2nsjZeN_bF4gD9mo8TitHxtWwYqkuw&s=9iYI1nX5sYFsn05bG2YOTPXTZhLfinPRHbCOf2Zvifg&e=.
Has no property changed (x, y, xSm, ySm, xMd, yMd, xLg, yLg, xXl, yXl)? Which version of gridster and which browser do you use?
Hey. I’m been having other issues so I haven’t been able to get as far as to check those values.
I can get the grid to display and if I drag and drop items down (in a downwards direction) it seems to work. If I drag and drop an item up (drag/drop item upwards above another item) I get an undefined error.
I am using version 1.5.1 and testing with Chrome.
Do you know what it could be?
zone.js:192 Uncaught TypeError: Cannot set property '0' of undefined at GridList.markItemPositionToGrid (gridList.js:427) at GridList.updateItemPosition (gridList.js:411) at GridList.tryToResolveCollisionsLocally (gridList.js:484) at GridList.resolveCollisions (gridList.js:148) at GridList.moveItemToPosition (gridList.js:104) at GridsterService.onDrag (gridster.service.js:134) at SafeSubscriber.eval [as _next] (gridster-item.component.js:255) at SafeSubscriber.__tryOrUnsub (Subscriber.js:240) at SafeSubscriber.next (Subscriber.js:187) at Subscriber._next (Subscriber.js:128)
Code: GridList.prototype.markItemPositionToGrid = function (item) { var position = this.getItemPosition(item); var x, y; this.ensureColumns(position.x + position.w); for (x = position.x; x < position.x + position.w; x++) { for (y = position.y; y < position.y + position.h; y++) { this.grid[x][y] = item; //line 427 where the error occurs } } };
Thank you very much!
From: Damian Wajdlich [email protected] Sent: Sunday, June 3, 2018 5:21 AM To: swiety85/angular2gridster [email protected] Cc: Collura, Chuck [email protected]; Author [email protected] Subject: Re: [swiety85/angular2gridster] Save Layout on Exit - Question (#255)
Has no property changed (x, y, xSm, ySm, xMd, yMd, xLg, yLg, xXl, yXl)? Which version of gridster and which browser do you use?
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_swiety85_angular2gridster_issues_255-23issuecomment-2D394148674&d=DwMCaQ&c=-7HNwxqfpkdcRXCW8HB54Q&r=YXGuA2OSNJxJ2590vzJtkaaqM9_MGtSLh-z1bJBbao8&m=viEiLFnOmiJPQ3qaLyUiQyuipcUUDi6j4yDMAoQFLVc&s=q77pCZvM_nTynvk77a0kY8dhmW1TAtMj4sHcxQiNJ1c&e=, or mute the threadhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_Al9wUtKFzmLeEStP023mLpTmWsWWmZtUks5t46qEgaJpZM4UVlfE&d=DwMCaQ&c=-7HNwxqfpkdcRXCW8HB54Q&r=YXGuA2OSNJxJ2590vzJtkaaqM9_MGtSLh-z1bJBbao8&m=viEiLFnOmiJPQ3qaLyUiQyuipcUUDi6j4yDMAoQFLVc&s=M9LnMtSov7YzbLKBeEU26ahuW3Y8NxKfdVciIoMvj1g&e=.
I also see this error: zone.js:192 Uncaught TypeError: Cannot set property '0' of undefined. using 7.0.2. Is there any more info on this? The error is encountered when I am dragging an itemPrototype around on the gridstercomponent without dropping it. The stack trace shows this as well: GridList.push../node_modules/angular2gridster/fesm5/angular2gridster.js.GridList.markItemPositionToGrid
getting same error in staging env , locally working fine
@swiety85
### vendor.js:sourcemap:58554 ERROR TypeError: Cannot set property '3' of undefined
at GridList.push../node_modules/angular2gridster/fesm5/angular2gridster.js.GridList.markItemPositionToGrid (dashboard-dashboard-module.js:sourcemap:1411)
at GridList.push../node_modules/angular2gridster/fesm5/angular2gridster.js.GridList.generateGrid (dashboard-dashboard-module.js:sourcemap:424)
at GridList.push../node_modules/angular2gridster/fesm5/angular2gridster.js.GridList.fixItemsPositions (dashboard-dashboard-module.js:sourcemap:946)
at GridsterService.push../node_modules/angular2gridster/fesm5/angular2gridster.js.GridsterService.fixItemsPositions (dashboard-dashboard-module.js:sourcemap:1957)
at dashboard-dashboard-module.js:sourcemap:3356
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (vendor.js:sourcemap:61009)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496)
defaultErrorLogger @ vendor.js:sourcemap:58554
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ vendor.js:sourcemap:58603
next @ vendor.js:sourcemap:61683
schedulerFn @ vendor.js:sourcemap:60668
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ vendor.js:sourcemap:138477
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ vendor.js:sourcemap:138415
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ vendor.js:sourcemap:138359
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ vendor.js:sourcemap:138336
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ vendor.js:sourcemap:138102
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ vendor.js:sourcemap:60660
(anonymous) @ vendor.js:sourcemap:61040
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ vendor.js:sourcemap:60977
onHandleError @ vendor.js:sourcemap:61040
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:392
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:191
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
ZoneTask.invoke @ zone.js:485
timer @ zone.js:2054
setTimeout (async)
scheduleTask @ zone.js:2075
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
onScheduleTask @ zone.js:297
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
scheduleMacroTaskWithCurrentZone @ zone.js:1114
(anonymous) @ zone.js:2090
proto.
ngular2gridster server GridList.push../node_modules/angular2gridster/fesm5/angular2gridster.js.GridList.markItemPositionToGrid (angular2gridster.js:1387)
