VERSION: ^9.3.3
HTML
<button (click)="toggleEditing()">{ editing ? 'cancel' : 'editing' }</button>
<button>ADD</button>
<gridster [options]="options">
<gridster-item class="px-3 py-2" [item]="item" *ngFor="let item of dashboard">
</gridster-item>
</gridster>
TS
editing = false;
ngOnInit() {
this.options = {
gridType: GridType.Fit,
margin: 0,
outerMargin: null,
outerMarginTop: null,
outerMarginRight: null,
outerMarginBottom: null,
outerMarginLeft: null,
useTransformPositioning: true,
mobileBreakpoint: 640,
keepFixedHeightInMobile: false,
keepFixedWidthInMobile: false,
scrollSensitivity: 10,
scrollSpeed: 20,
enableEmptyCellClick: this.editing,
enableEmptyCellContextMenu: false,
enableEmptyCellDrop: false,
enableEmptyCellDrag: this.editing,
emptyCellDragCallback: this.emptyCellClick.bind(this),
enableOccupiedCellDrop: false,
ignoreMarginInRow: false,
draggable: {
enabled: this.editing,
stop: (event) => { this.setFlrLayout(event); }
},
resizable: {
enabled: this.editing,
stop: (event) => { this.setFlrLayout(event); }
},
swap: true,
disablePushOnDrag: false,
disablePushOnResize: false,
pushDirections: { north: true, east: true, south: true, west: true },
pushResizeItems: false,
displayGrid: DisplayGrid.Always,
disableWindowResize: false,
disableWarnings: false,
scrollToNewItems: false,
itemInitCallback: ((item: GridsterItem, itemComponent: GridsterItemComponentInterface) => {
window.dispatchEvent(new Event('resize')); // to reisize respective charts
})
};
}
toggleEditing() {
this.editing = !this.editing;
}
ngOnChanges() {
if (this.options && this.editing || this.options && !this.editing) {
this.options['enableEmptyCellClick'] = this.editing;
}
}
emptyCellClick(event: MouseEvent, item: GridsterItem): void {
console.log(`test ${item}`);
}
I am attempting to implement multi-selection in a grid. However, the click functionality is not working as expected. When I click on an empty cell, it does not trigger the console log in the dev tools.
For example, when I click on multiple empty cells for selection and then click "ADD", it should add those selected items accordingly.
https://i.stack.imgur.com/mA5qE.png
TO