angular-gridster2
angular-gridster2 copied to clipboard
Detetcting grid overflow
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
};
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.
Is there a way to access the item component GridsterItemComponentInterface
so that we can monitor the flag notPlaced
?