Repositioning a gridster item doesn't reposition it in all breakpoints

[Blackbaud-MikitaYankouski]

Currently our gridster component renders grid items in oddly ordered locations when switching from one screen size to another after dragging the items around.

Example: user places items 1, 2, 3 onto the grid in that order onto a xl size screen in one row (img 1), then repositions them in a 3,2,1 order with 1 being on the second row (img 2). When the user minimizes the screen to 'sm' breakpoint afterwards, gridster reflows items to a 1,3,2 order (img 3) instead of 3,2,1.

Where does gridster determine these positions so we could leverage this reflow pattern to have more consistent render order across all breakpoints?

[swiety85]

Hi, sorry for late response. I can reproduce it. I will try to find a solution or fix for your problem. What I can say for now is that changing position of items in one breakpoint will not reflect on items position in other breakpoints.

[Blackbaud-MikitaYankouski]

We were able to resolve this issue for our app by replacing the fixItemsPositions() function with the following code, which removes the breakdown of grid items into valid and invalid lists and makes the call to the gridList.findPositionForItem() with the starting position being at the original position of the tile (although the x and y positions are reversed because of the direction of our grid).

this.gridsterComponent.gridster.gridList.fixItemsPositions = (options: IGridsterOptions) => {
  let gridList = new GridList([], options);
  gridList.generateGrid();

  this.gridsterComponent.gridster.items.forEach(item => {
    let itemCopy = item.copyForBreakpoint(options.breakpoint);
    let position = gridList.findPositionForItem(itemCopy, { x: itemCopy.y, y: itemCopy.x });
    gridList.items.push(itemCopy);
    (<any>gridList).setItemPosition(itemCopy, position);
    (<any>gridList).markItemPositionToGrid(itemCopy);
  });
  gridList.pullItemsToLeft();
  this.gridsterComponent.gridster.gridList.items.forEach(itm => {
    let cachedItem = gridList.items.filter(cachedItm => {
      return cachedItm.$element === itm.$element;
    })[0];
    itm.setValueX(cachedItem.x, options.breakpoint);
    itm.setValueY(cachedItem.y, options.breakpoint);
    itm.w = cachedItem.w;
    itm.h = cachedItem.h;
    itm.autoSize = cachedItem.autoSize;
  });
};

[LjiljanaMatic]

@Blackbaud-MikitaYankouski We are having the same problem. Can you share how you have imported GridList from angular2gridster?