How to force add item using gridster 2

I have the following grid =>

dashboard: Array<GridsterItemCustom> = [
{cols: 4, rows: 10, y: 0, x: 1, type: NavigationMiniMapComponent, inputs: { synchGroupId : this.synchGroupId}, name: 'MINIMAP_NAME', id: 'waypoint'},
{cols: 4, rows: 10, y: 0, x: 5, type: NavigationVrMapComponent, inputs: { synchGroupId : this.synchGroupId}, name: 'VRMAP_NAME', id: 'vrMap'},
{cols: 1, rows: 3, y: 7, x: 0, type: NavigationWaypointUiComponent, name: 'WAYPOINT_INFO_NAME', id: 'informationn'},
{cols: 1, rows: 3, y: 1, x: 0, type: NavigationDroneUiComponent, name: 'DRONE_INFO_NAME', id: 'droneNav'},
{cols: 1, rows: 3, y: 4, x: 0, type: NavigationMissionUiComponent, name: 'ROUTE_INFO_NAME', id: 'routes'},
{cols: 1, rows: 1, y: 0, x: 0, dragEnabled: false, resizeEnabled: false, type: NavigationMenuComponent, name: '', id: 'planMenu'},
];


When the user click on a button, I want to add a new element (and resize every other element so that my element is displayed :

onclick(value)
if (value) {
this.dashboard.push({cols: 4, rows: 5, y: 0, x: 1, type: NavigationRealMapComponent, name: 'REALMAP_NAME', id: 'videocam'});
}
if (!value) {
const index = this.dashboard.findIndex(e => e.id === 'videocam');
if (index > -1) {
this.dashboard.splice(index, 1);
}
}
}


Basically, all the element that are currently occupying the space where I want to put my new element will be resized.

Is there a way to do it from within the package ? Or I have to make a custom fuction?

Right now the code throw me this

angular-gridster2.js:1649 Can't be placed in the bounds of the dashboard, trying to auto position!/n{"cols":4,"rows":5,"x":1,"y":0} angular-gridster2.js:1804 Can't be placed in the bounds of the dashboard!/n{"cols":4,"rows":5,"x":1,"y":0}
​

Continue reading...