CODEWITHSUNDEEP
angular8angular-gridster2
mxv
mxv

Reputation: 1

Angular Gridster-2 Redraggable and Resize

I am new to angular gridster 2

Could you please let me know if we are able to display the already developed charts using angular gridster 2 , I am also looking to see the same approach . As my UI has 5 different div blocks and inside there is a card being displayed in each div block ..

How can I use angular gridster to disaply these 5 cards with draggable and resizable features after loading the page..

<gridster [options]="options">

<div class="col-md-12 ml-auto mr-auto" >

<div class="row"   > <!--[item]="item" *ngFor="let item of dashboard"  gridster-item-->
<gridster-item class="col-lg-3 col-md-6 col-sm-6"  [item]="item" *ngFor="let item of dashboard" >

<card1></card1>
<card2></card2>

</gridster-item>
</gridster>

export class dashboard implements oninit{

options={
    draggable: {
      enabled: true},
      resizable: {
        enabled: true
      }
  };
  dashboard = [
    {cols: 1, rows: 1, y: 0, x: 0}
  ];

}

Please explain what does the rows,columns, x and y represents .. How does it effect the UI if these values are changed..

Upvotes: 0

Views: 2968

Answers (1)

Zin Min
Zin Min

Reputation: 4685

Cols and Rows are your gridster layout design to allow gridster-items. If cols = 1 and rows = 1, you can put one gridster item only except maxItemRows and maxItemCols set greater than 1. The y and x are col and row index for gridster-item.

Example, cols = 5, rows = 5, and x = 3, y = 2, gridster-item will display start from column 3 and row 2.

Here are some articles about gridster.

https://medium.com/javascript-in-plain-english/drag-and-drop-dashboard-builder-with-angular-and-gridster-a07592e54ce2

https://developer.aliyun.com/mirror/npm/package/helio-angular-gridster

Upvotes: 1

Related Questions