angular-gridster2 icon indicating copy to clipboard operation
angular-gridster2 copied to clipboard

Detetcting grid overflow

Open nisaanwaar opened this issue 6 years ago • 2 comments

I have a limited space grid and when the space is fully utilized, it places the new item outside gridster's defined area and when i click on the item it wouldn't let me drag or resize and moves it to left top corner of grid as 1x1 item. How can i user getNextPossiblePosition() to cater this situation when i dont have any item to pass an argument? I want to avoid placing item outside grid Here are my gridster options:

this.options = {
   gridType: GridType.ScrollVertical,
   compactType: CompactType.None,
   itemChangeCallback: this.itemChange.bind(this),
   itemResizeCallback: this.itemChange.bind(this),
   itemInitCallback: this.iteminit.bind(this),
   resizable: {
     delayStart: 0,
     enabled: true,
     stop: this.Reflow.bind(this),
     handles: {
       s: true,
       e: true,
       n: true,
       w: true,
       se: true,
       ne: true,
       sw: true,
       nw: true
     }

   },
   swap: true,
   draggable: {
     enabled: true,
     stop: this.Reflow.bind(this)
   },

   pushItems: true,
   disablePushOnDrag: false,
   disablePushOnResize: false,
   pushDirections: { north: true, east: true, south: true, west: true },
   pushResizeItems: false,
   displayGrid: DisplayGrid.None,
   disableWindowResize: false,
   disableWarnings: false,
   scrollToNewItems: false,
   margin: 15,
   outerMargin: true,
   outerMarginTop: null,
   outerMarginRight: null,
   outerMarginBottom: null,
   outerMarginLeft: null,
   mobileBreakpoint: 640,
   minCols: 48,
   maxCols: 48,
   minRows: 24,,
   maxRows: 24,
   maxItemCols: 150,
   minItemCols: 5,
   maxItemRows: 150,
   minItemRows: 5,
   maxItemArea: 1160,
   minItemArea: 5,
   defaultItemCols: 10,
   defaultItemRows: 10

 };

nisaanwaar avatar Jun 07 '18 12:06 nisaanwaar

In case of gridster does not have enough space to add any new item, it will still add it and will not add any key like x,y,cols,rows and if it's already there it will make all to undefined.

You will just need to loop it over the grid-items after a timeout of say 500, to check if the values x,y,cols and rows are there or not... It not then it means the gridster is fully occupied and hence you can through an event or call a function as per required.

er-shrey avatar Feb 18 '19 06:02 er-shrey

Is there a way to access the item component GridsterItemComponentInterface so that we can monitor the flag notPlaced?

austenstone avatar Apr 19 '21 22:04 austenstone