CODEWITHSUNDEEP
angularangular-gridster2
Esteban Chornet
Esteban Chornet

Reputation: 1227

Gridster2 grid not resizing items when toggling material sidebar

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

Upvotes: 1

Views: 3273

Answers (2)

Narayanan Ramanathan
Narayanan Ramanathan

Reputation: 1400

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.

Upvotes: 2

GSangram
GSangram

Reputation: 133

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

Upvotes: 2

Related Questions