angular-gridster2 icon indicating copy to clipboard operation
angular-gridster2 copied to clipboard

How to get all grid items and their positions?

Open JulioDeL opened this issue 2 years ago • 2 comments

Hello,

This is a question, not an issue. I'd appreciate a lot if you could please help me on this one.

I want to know how to retrieve all items rendered in the grid. I'm aiming to store this information in a database so next time the user loads the grid it looks just like last time. However I fail to see in the documentation how I can achieve this.

Thanks.

JulioDeL avatar Sep 23 '22 08:09 JulioDeL

As far as I know, the list of GridsterItem is mantained by the GridsterComponent. So, every time an item is moved or resized, that arrangment is set in the GridsterItem. You only have to loop that list to get the GridsterItem arrangement.

giosoftware avatar Nov 02 '22 10:11 giosoftware

@JulioDeL

options: GridsterConfig = {
        gridType: GridType.Fit,
        compactType: CompactType.None,
        itemChangeCallback: this.itemChangeCallback.bind(this),
        .....
}
itemChangeCallback(item: YourDashboardItemType, itemComponent: GridsterItemComponent): void {
        item.x = itemComponent.$item.x;
        item.y = itemComponent.$item.y;
        item.rows = itemComponent.$item.rows;
        item.cols = itemComponent.$item.cols;
    }
<gridster [options]="options">
  <gridster-item [item]="item" *ngFor="let item of dashboard">
    <!-- your content here -->
  </gridster-item>
</gridster>

I have the exact usecase. Whenevery gridster updates x, y, rows, cols propety to the griditem you can set them to your dashboard item directly using itemChangeCallback. So Whenever you want to get the grid positions and sizes, just use the dashboard you passed.

AndeYashwanth avatar Dec 13 '22 14:12 AndeYashwanth