angular-gridster2
angular-gridster2 copied to clipboard
How to get all grid items and their positions?
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.
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.
@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.