1

I had implemented angular-gridster2 to hold several widgets. They all work fine and are in place when displayed in the browser. But when the same view is used in mobile view, they are stacked one upon another with only one single column which is fine, but the problem is that the order of the items is random. Is there a possible way so that the widgets are ordered as per their left to right position in the web view.

The configuration of gridster I am using :

  {
   "gridType":"fixed",
   "fixedColWidth":125,
   "fixedRowHeight":125,
   "swap":false,
   "pushItems":false,
   "displayGrid":"none",
   "draggable":{
      "enabled":false
   },
   "resizable":{
      "enabled":false
   },
   "minCols":12,
   "maxCols":20,
   "minRows":12,
   "margin":15,
   "disableWindowResize":false,
   "scrollToNewItems":true,
   "disableWarnings":false,
   "ignoreMarginInRow":false,
   "disableScrollHorizontal":false,
   "disableScrollVertical":false,
   "minItemCols":1,
   "minItemRows":1,
   "compactType":"none",
   "isMobile":true,
   "api":{
      
   }
}
Atul Stha
  • 1,404
  • 8
  • 23
  • 46

2 Answers2

0

You can't. The ordering in mobile is based on the order of adding them to array of gridster-items, gridster does not do any additional ordering.

If you want to re-order in mobile view, you would have to change order in that array of gridster items.

Slaven Tomac
  • 1,552
  • 2
  • 26
  • 38
0

For whoever might need a solution, mine was to order the Gridster items by X and Y using the following line:

gridsterItems.sort((a, b) => a.x - b.x || a.y - b.y);
paulchartres
  • 25
  • 5