How to force add item using gridster 2

Question

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}