angular2-grid icon indicating copy to clipboard operation
angular2-grid copied to clipboard

Unable to fire click event in touch devices

Open bruiztorres opened this issue 7 years ago • 2 comments

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.

bruiztorres avatar Oct 25 '17 07:10 bruiztorres

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>

crivadavi avatar Oct 27 '17 07:10 crivadavi

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?

rmiller-sgntr avatar Jun 03 '18 15:06 rmiller-sgntr