Angular-gridster2: Question regarding saving positions

Created on 14 Dec 2018 · 4Comments · Source: tiberiuzuld/angular-gridster2

Hi. I do have a question related to saving positions after dropping elements. My elements are all the same size (col: 1, row: 1). I would like when user move some element, next time when he loads the page, that element be on place where he moved it. I am guessing that this is related to itemChangeCallback and with change with x and y, but I am not sure how this is implemented. Thanks in advance.

question

Source

Vojislav-Vukovic

Most helpful comment

Hi @Vojislav-Vukovic . You can use the itemChangeCallback and/or the itemRemovedCallback options for the dashboard, depending on your use case. For example:

ngOnInit() {
  this.options = {
    itemChangeCallback: () => { this.saveGrid() },
    // . . .
  };

  this.dashboard = {
    // gridster items . . . 
  };
}

And then you can use the saveGrid() method to POST the grid to you backend (if you want your changes to be persistent - or use local browser storage if you only want to save it for the current session).

Here is the example of the saveGrid() method:

private saveGrid = (): void => {
  this.myGirdSaveService.postDashboard(this.dashboard).subscribe(data => {
    console.log(`Dashboard saved.`);
  },
    error => { console.error(error); }
  );
}

You're basically saving the dashboard grid as stringified JSON.

petarGitNik on 24 Dec 2018

👍2

All 4 comments

Hi @Vojislav-Vukovic ,

You need to save in db the entire settings of the item(col,row,x,y) when itemChangeCallback is triggered.
You will get the item in the arguments of the callback.
You will then need on load from DB the items and set them to the grid.

tiberiuzuld on 14 Dec 2018

Hi @tiberiuzuld, thanks on fast reply. Sorry I didn't replied sooner. Thank you for the info, but honestly I do have doubts how to implement this because I am lacking practical example on demo page (how and when to call itemChangeCallback for example) and similar. Anyway, tnx for your answer.

Vojislav-Vukovic on 19 Dec 2018

Hi @Vojislav-Vukovic . You can use the itemChangeCallback and/or the itemRemovedCallback options for the dashboard, depending on your use case. For example:

ngOnInit() {
  this.options = {
    itemChangeCallback: () => { this.saveGrid() },
    // . . .
  };

  this.dashboard = {
    // gridster items . . . 
  };
}

Here is the example of the saveGrid() method:

private saveGrid = (): void => {
  this.myGirdSaveService.postDashboard(this.dashboard).subscribe(data => {
    console.log(`Dashboard saved.`);
  },
    error => { console.error(error); }
  );
}

You're basically saving the dashboard grid as stringified JSON.

petarGitNik on 24 Dec 2018

👍2

I am using multiple dashboard within the application. and I am using itemChangeCallBack event to save gridster item position into storage associated with that particular dashboard. But when i am switching to new dashboard whose compactType is other than "none" ( ex - compactUpAndLeft ) then it reverses the position of recent GridsterItem back to the original position of last dashboard. What I found is itemChangeCallBack again reverting the position to the previous position. Anyone having any idea/clue please let me know.