[<p-table>] Any way to start the cell edit on double click instead of single click?

[StefanZimmermann98]

Hi there, I have a and i am using the cell edit feature to modify the values. Now my question is: Is it possible to invoke the event which starts / puts the cell in "edit mode" only if there has been made a double click in the cell instead of a single click? My users are changing values because they simply want to select a row and edit the cell with the next keyboard interaction. I still want to keep the cell edit mode, it suits better than the row edit but just on double click.

[cetincakiroglu]

Hi,

Unfortunately, there isn't a feature like that, but we can try to find a workaround if you share a Stackblitz example

[StefanZimmermann98]

I have build a stackblitz with a similar structure than mine: https://stackblitz.com/edit/1n2wxv?file=src%2Fapp%2Fdemo%2Ftable-virtual-scroll-lazy-demo.html

Goal is to supress the edit on single click but triggering it in the startEditing() function on the Component. I have no clue about either of the steps. With my understanding there are multiple questions:

1. How to hook into the cell click event which starts the edit
2. Suppress it (or have something like a timer-state to check if a second click on the same cell happened
3. I don't have the requirement to single edit a cell on dblclick, start a row edit is also fine
4. how to determine which data have been changed in order to save it persistent

Thanks already for the help! Workarounds are fine in this case I understood that there is no default feature (it would have been documented), I just need to create this behaviour ;) A beautiful solution is not the primary goal ;)

[cetincakiroglu]

We've tried to provide a workaround but it seems that it's not possible to manage clicks as you wanted, maybe something different such as cmd + click or shift + click to edit would be much easier to operate in this case. You can discuss this with other users in our PrimeLand discord server https://discord.gg/gzKFYnpmCY

[gobigobs]

TypeScript :

  @ViewChild('dt1') dt1: any;
onDblClick(event: MouseEvent, cell: HTMLElement): void {
  if (this.dt1 && cell) {
    let locell = cell;
    if(cell.tagName?.toLowerCase() === 'span'){
      locell = cell.closest('td');
    }
    this.dt1.editingCell = locell;
  }
}

stopEditing(): void {
  if (this.dt1 && this.dt1.editingCell) {
    debugger
    this.dt1.editingCell = null;
  }
}

HTML :

<ng-template pTemplate="body" let-product let-columns="columns" let-index="rowIndex">
      <tr class="h-45px d-none">
        <td>
          <p-skeleton [ngStyle]="{'width': '10%'}"></p-skeleton>
        </td>
        <td *ngFor="let col of columns; let even = even">
          <p-skeleton [ngStyle]="{'width': even ? (col.field === 'name' ? '30%' : '40%') : '60%'}"></p-skeleton>
        </td>
      </tr>
      <tr [pContextMenuRow]="product">
        <td pFrozenColumn>
          <p-tableCheckbox [value]="product"></p-tableCheckbox>
        </td>
  
        <td (dblclick)="onDblClick($event, $event.target)" (click)="stopEditing()"

It working for me..