angular2-grid
angular2-grid copied to clipboard
Unable to fire click event in touch devices
I'm facing an issue when a widget in the grid implements the click event in touch devices. For some reason the click callback is not fired because the event is intercepted when resizable/draggable options are enabled:
this.gridConfig = {
resizable: true,
draggable: true,
max_rows: 4,
margins: [0],
auto_resize: false,
cascade: 'left',
col_width: size,
min_width: size,
row_height: size,
min_height: size
};
<div class="dashboard grid" [ngGrid]="gridConfig">
<div class="dashboard-item" *ngFor="let widget of dashboard.Widgets; let i = index; trackBy:identify" [ngGridItem]="{
'payload': widget.Id,
'sizex': widget.Size.Width,
'sizey': widget.Size.Height,
'col': widget.Position.X,
'row': widget.Position.Y,
'resizable': true
}">
<div (click)="doSomething()"></div>
</div>
</div>
Did you know any workaround to deal with this issue?
Thanks in advance.
on the griditem config you could set the dragHandle property to limit the click event prevented only in a restricted area, for example:
<div class="dashboard-item" *ngFor="let widget of dashboard.Widgets; let i = index; trackBy:identify"
[ngGridItem]="{
'payload': widget.Id,
'sizex': widget.Size.Width,
'sizey': widget.Size.Height,
'col': widget.Position.X,
'row': widget.Position.Y,
'resizable': true,
'dragHandle': '.title'
}">
<div style="height: 5%;" class="title"></div>
<div (click)="doSomething()"></div>
</div>
I think the whole idea is to not use a drag handle, and let the grid use the entire item, as described in the README. It works perfectly fine on non-mobile. I too would like to have this option. Can someone suggest a solution that does not involve using a restricted handle?