Skip to content
This repository has been archived by the owner on Mar 5, 2024. It is now read-only.

Unable to fire click event in touch devices #274

Open
bruiztorres opened this issue Oct 25, 2017 · 2 comments
Open

Unable to fire click event in touch devices #274

bruiztorres opened this issue Oct 25, 2017 · 2 comments

Comments

@bruiztorres
Copy link
Contributor

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.

@crivadavi
Copy link

crivadavi commented Oct 27, 2017

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>

@rmiller-sgntr
Copy link

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?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants