Item properties

[ss27rw]

Is it possible to set item.cols, item.rows with a button or text input. We would like to maximize box item with click on the header title of the box.

[tiberiuzuld]

Hi @pgsrw ,
Yes it is possible by using this.options.optionsChanged() from the options object you gave to the grid after you made the change to any option from grid and item.

resizeItem($event, item) {
  item.y = 10;
  this.options.optionsChanged();
}
<button md-icon-button md-raised-button class="resize-handler" (click)="resizeItem($event, item)">
  <md-icon>open_with</md-icon>
</button>

Made a fix in v2.9.1 for the item options not being updated.

Let me know if this fixes your issue.

[ss27rw]

Hi,
yes it works!! great!
thx

[walakad]

Hi tiberiuzuld,

I want to maximize an item too (and then I want to unmaximize it with originals values).

I want to simulate this css :
maximise {
left: 0px ;
top: 0px ;
width: 100%;
height: 100%;
z-index: 500;
}

So, I try to do :
maximiseItem($event, item) {
item.x = 0; // OK
item.y = 0; // OK
item.cols = '100%'; // how?
item.rows = '100%'; // how?
// item.zindex = 500 //how ?
this.changedOptions(); // OK
}

How can I do ? is it possible ?

Thanks

[tiberiuzuld]

Hi @walakad ,
There is no way to set cols and rows in %.
Item zIndex you can override from css.

But I think you mean you want to make your widget fullscreen.

This is not possible from library.

I suggest making a separate state for widget full screen where you just display your widget component without the gridster dashboard.

Thanks

[walakad]

Hi @tiberiuzuld,

Thanks for your response, your reactivity to answer and for your grid module ^^
I found how to maximize my widget (in the parent container), so I give my solution in case others are interested.
The solution is CSS only.

I the grid item, I set a specific class to the item I want to maximize , like :
<gridster-item [item]="item" *ngFor="let item of items" [ngClass]="item.isMaximized ? 'widget-maximize': ''">

And my css is :
.widget-maximize {
left: 0px !important;
top: 0px !important;
width: 100% !important;
height: 100% !important;
z-index: 500;
}

[plaetzchen79]

The Css solution is awesome.
I have tried the hole day until i found this simple solution.
Should be in the documentaion or example since this is a very common task

[mbshingala28]

Hello,
Does anyone provide demo full example of maximizing grid item?