Force Add an Item

[popoleeMaster]

I have the following grid =>

  options: GridsterConfig = {
    minCols: 9,
    maxCols: 9,
    minRows: 10,
    maxRows: 10,
    gridType: GridType.Fit,
    pushItems: true,
    draggable: {
      enabled: true,
      dragHandleClass: 'gridster-item__header',
      ignoreContent: true
    },
    resizable: {
      enabled: true,
      handles: {s: false, e: false, n: false, w: false, se: true, ne: true, sw: true, nw: true}
    },
    disableWindowResize: false,
    scrollToNewItems: false,
    disableWarnings: false,
    ignoreMarginInRow: false
  };

With the following items

  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'},
  ];

I would like at some point to add an element

this.dashboard.push({cols: 4, rows: 10, y: 0, x: 1, type: NavigationRealMapComponent, name: 'REALMAP_NAME', id: 'videocam'});

Current behaviour =>

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}

What I propose =>

There should be an option to force push an item, so that it will be placed at the desired location x/y with the desired size cols/rows. When the element is force pushed, all element will be moved/resized according to the available space. If no available space / can't resize cause grid is full, then throw

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

[basstune]

I was having a similar problem when I was trying to insert an item with a conflicting position in a compacted grid with compactType = 'compactUp'. So what I did was:

1. Set the disableAutoPositionOnConflict to true in the grid options. That way it won't recalculate the item's position.

2. After inserting, go through the grid's items and find the new item. It has its notPlaced property set to true. Set that back to false.

3. Manually 'push' to the desired side, so the other items are pushed away and the newly added item can take its required position. For a grid with the compactUp type, that would be like so:

    const conflicting = _.find(this.gridsterComponent.grid, (c: GridsterItemComponentInterface) => c.notPlaced);
   
    conflicting.notPlaced = false;
    const push = new GridsterPush(conflicting);
    if (compactType === 'compactUp') {
        push.pushItems(push.fromNorth);
    }
   
    push.setPushedItems();
    push.destroy();
   

[Vasanthvivi]

I was having a similar problem when I was trying to insert an item with a conflicting position in a compacted grid with compactType = 'compactUp'. So what I did was:

1. Set the disableAutoPositionOnConflict to true in the grid options. That way it won't recalculate the item's position.
2. After inserting, go through the grid's items and find the new item. It has its notPlaced property set to true. Set that back to false.
3. Manually 'push' to the desired side, so the other items are pushed away and the newly added item can take its required position. For a grid with the compactUp type, that would be like so:

    const conflicting = _.find(this.gridsterComponent.grid, (c: GridsterItemComponentInterface) => c.notPlaced);
   
    conflicting.notPlaced = false;
    const push = new GridsterPush(conflicting);
    if (compactType === 'compactUp') {
        push.pushItems(push.fromNorth);
    }
   
    push.setPushedItems();
    push.destroy();
   

could you elaborate @basstune ?

[eapatel]

Hi Everyone, I'm also looking for the solution of this problem. Followed the steps as suggested by @basstune but still no luck. Any suggestion?

[huydau91]

Hi Everyone, I'm also looking for the solution of this problem. Followed the steps as suggested by @basstune but still no luck. Any suggestion?

Hi, I tried some ways, and have one solution work for me. That I put condition for display gridster like this:

<ng-container *ngIf="!loadingChart"> <gridster [options]="options" class="gridster-layout"> <gridster-item [item]="widget" .....

And in the component I run setTimeout for 1 second: setTimeout(() => { this.loadingChart = false; }, 1000)

I hope this can work for someone.