1

I have a grid using Gridster2 navigating from an item of a material sidebar. Sidebar is openned, but, whenever I toggle the sidebar (hide it) gridster is not resizing items until I force a refresh. Is there any way to have it "auto" refresh?

To reproduce it, just go to https://tiberiuzuld.github.io/angular-gridster2/ and inspect element and delete <mat-nav-list class="mat-nav-list mat-list-base" role="navigation"> and its content. It will not take full screen until you change the Grid Type.

Reference: https://github.com/tiberiuzuld/angular-gridster2/tree/master/src/app/sections/api

Esteban Chornet
  • 928
  • 3
  • 14
  • 38

2 Answers2

2

Grid will auto resize only on window resize. There is no way to track the change in size of the container until the resize event is triggered.

You need to trigger the resize event where you need.

this.options.api.resize()

Please refer the api documentation.

Michael Venable
  • 5,011
  • 3
  • 23
  • 20
Narayanan Ramanathan
  • 1,310
  • 10
  • 18
2

I resolved the issue by below two steps:

  1. Step1: by adding [ngStyle] to the <gridster>. It added responsive nature to grid-items:

    <gridster [options]="options" [ngStyle]="{'width': toggled ? '100%' : 'auto'}">
   <gridster-item [item]="item" *ngFor="let item of dashboard">
      <!-- your content here -->
   </gridster-item>
</gridster>

    Where toggled is a boolean value saying whether the side-bar toggled or not. Intial value is false.

  2. Step2: To force items content(charts in my case) become responsive inside grid-items, I used the below code:

    itemInitCallback: ((item: GridsterItem, itemComponent: GridsterItemComponentInterface) => {
    window.dispatchEvent(new Event('resize'));  // to reisize respective charts 
})

    Where itemInitCallback is an inbuilt gridEvent callback method provided by angular-gridster2

GSangram
  • 123
  • 10
  • Hi, i tried your options after doing that on sidebar toggle gridster resizes perfectly, but window resize doesnt happen anymore. – Suraj Gupta Jun 21 '20 at 20:04