angular gridster 2 resize a widget using a button

Question

i have the gridster item as below and using https://github.com/tiberiuzuld/angular-gridster2

  <gridster-item [item]="myAptInfolet" class="shadow">
                               <app-my-appointments-infolet></app-my-appointments-infolet>
                        </gridster-item>

.ts

this.myAptInfolet = {cols: 1, rows: 2, y: 0, x: 4}

the resize function is like

test(){
    this.myAptInfolet.cols = 2
    this.options.api.resize()

   }

but nothing happens. no error in console. please advise

score 2 · Answer 1 · answered Aug 16 '18 at 08:31

I'm new to angular-gridster2, but I managed to apply some dynamic changes to my gridster's layout, so I will try to help you.

I can't see where your "options" property comes from, but it should be an instance of GridsterConfig, so the beginning of your .ts file should look like this:

import { GridsterConfig, GridsterItem }  from 'angular-gridster2';
   options: GridsterConfig;

Once you defined your options, you can refresh your gridster's layout by calling the api's optionsChanged method like this:

test(){
    this.myAptInfolet.cols = 2;
    this.options.api.optionsChanged();
}

You can refer to the angular-gridster2 github's to find a very small and clean example on how to dinamically interact with items and change the grid's layout:

import { GridsterConfig, GridsterItem }  from 'angular-gridster2';
   options: GridsterConfig;
   dashboard: Array<GridsterItem>;

   static itemChange(item, itemComponent) {
     console.info('itemChanged', item, itemComponent);
   }

   static itemResize(item, itemComponent) {
     console.info('itemResized', item, itemComponent);
   }

   ngOnInit() {
     this.options = {
       itemChangeCallback: AppComponent.itemChange,
       itemResizeCallback: AppComponent.itemResize,
     };

     this.dashboard = [
       {cols: 2, rows: 1, y: 0, x: 0},
       {cols: 2, rows: 2, y: 0, x: 2}
     ];
   }

   changedOptions() {
     this.options.api.optionsChanged();
   }

   removeItem(item) {
     this.dashboard.splice(this.dashboard.indexOf(item), 1);
   }

   addItem() {
     this.dashboard.push({});
   }

I hope this can help.

but I couldn't find in all their examples where that "changedOptions()" function is called from... — bokkie, Aug 13 '19 at 10:34

score 1 · Answer 2 · answered May 14 '20 at 10:23

1

You were not passing a reference to the resized item into your method test(). Building further on the answer from Sebapabst0, here's a sample StackBlitz: https://stackblitz.com/edit/angular-ivy-jjati4

answered May 14 '20 at 10:23

IvoK

21
2

score 0 · Answer 3 · answered Jun 16 '20 at 08:15

This works for me:

import { GridsterConfig, GridsterItem }  from 'angular-gridster2';
   options: GridsterConfig;
   dashboard: Array<GridsterItem>;

   ngOnInit() {
     this.options = {
         itemResizeCallback: (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => {
            this.updateSizeOnServer(item, itemComponent);
          }
     };

     this.dashboard = [
       {cols: 2, rows: 1, y: 0, x: 0},
       {cols: 2, rows: 2, y: 0, x: 2}
     ];
   }

  updateSizeOnServer(item, itemComponent) {
    // call some API tu update the size
  }

angular gridster 2 resize a widget using a button

3 Answers3