Double click on row

[WA-WilliamKrieg]

Hello, I have a small problems,

How to get the row selected by a DblClick ? I want execute a redirection on the dblClick event. I do not find this information in the documentation.

Thank you very mush for your help.

[amcdnl]

This would need to be a new event. For the short term, you could always use a template.

For this, I want to break out row to be its own directive and wrap cells. We need too many things from rows and we are cluttering the global datatable component events/inputs ATM.

[enough1987]

i did it by adding wrappers to each template , but it would be very nice to have special event for this build in datatable.

         <ng-template #editTmpl let-value="value" let-row="row" let-i="index" >
            **<div (dblclick)="edit(row)" class="custom-wrapper-for-datattable-row" >** 
            <span title="Double click to edit" 
                  *ngIf="!editing[row.$$index + '-name']">
                  {{value}}
            </span>
            <input #input autofocus type="text"
                  (blur)="updateValue($event, 'name', value, row, input)" 
                  (keyup.enter)="updateValue($event, 'name', value, row, input)"
                  [hidden]="!editing[row.$$index + '-name']" 
                  [value]="value"
                  [class.error]="row.error"
            />
            <img class="rename-icon" src="assets/images/rename.png" 
                  (click)="onRename( input, row )"
                  [hidden]="!checkingPermission(row, 'Update')"   />
            <!--         editing[row.$$index + '-name'] = true-->
           </div>

         </ng-template>

         <ng-template #dateTmpl let-value="value" let-row="row" let-i="index">
           **<div (dblclick)="edit(row)" class="custom-wrapper-for-datattable-row" >** 
           <time>{{value | dateFormat }}</time>
           </div>
         </ng-template>

          <ng-template #boolTmpl let-value="value" let-row="row" let-column="column" let-i="index">
              **<div (dblclick)="edit(row)" class="custom-wrapper-for-datattable-row" >** 
              <img class="validStatus-img" src="./assets/images/{{value?column.trueImg:column.falseImg}}"  />
              <span>{{value ? "Valid" : "Invalid"}}</span>
              </div>
          </ng-template>

[zualexander]

@enough1987 does this workaround work for you if you use the selectionType-property of the table with 'multiClick'?

[ceoaliongroo]

I tried to implement (dblclick) event in the ngx-datatable thi create an issue in with the (actvate) event.

Using only (active) without (select) events worked for me. There was no necessary subscribe something. (active) event return a plain object, not a EventEmitter as the documentation said.

I think is not necessary to add other event (dblclick) will be more confusing, . My suggestion if the idea keep rolling, will be:

remove (active) event an keep standard events as (click), (dblclick) and (keydown) separately.

[jdhenckel]

@ceoaliongroo please explain better. with some code example. Are you able to capture dblclick on any row by simply adding the (active) handler to the top level ngx-datatable? if so how can you tell which row is under the mouse? Thanks

[tomasprieboj]

@enough1987 is it possible to change row color like with build in (select)?

[aider]

@jdhenckel I have a quick solution with activate

    activate($event) {
        if ($event.type === 'click') {
            if(this.lastClick > 0 && Date.now()-this.lastClick <=500) {
                console.log('dblclick');
            } else {
                this.lastClick = Date.now();
            }
        } else {
            this.lastClick = 0;
        }
    }

[ceoaliongroo]

@jdhenckel my code is:

onActivate(event) {
  if (event.type === 'dblclick') {
     return true;
  }
}

I finally understood, thata the component use event (active) for this

[Velmurugan47]

we have a row with 5 columns. In column 1,2 and 5 has values. column 3 &4 has no values. If i mouse over with column 3 or 4 and double click it (activate) event is not emitting. if you know solution please update immediately. its urgent. we are blocking due to this issue. If any other solutions also welcome. Thanks.

[Brampage]

I have created a double click directive.

Here to use it:

<ngx-datatable
  (appNgxDatatableDblClick)="onDblClickRow(row)"
  ...
></ngx-datatable>

The directive:

@Directive({
  selector: '[appNgxDatatableDblClick]',
})
export class NgxDatatableDblClickDirective implements OnInit {
  @Output('appNgxDatatableDblClick') dblClick = new EventEmitter();

  constructor(private element: ElementRef) {}

  @HostListener('activate', ['$event'])
  onActivate(event: Model): void {
    if (event.type === 'dblclick' && event.row) {
      this.dblClick.emit(event.row);
    }
  }

  // Can be used for styling (e.g.: .appNgxDatatableDblClick datatable-row-wrapper { cursor: pointer; }
  ngOnInit(): void {
    (this.element.nativeElement as Element).classList.add(
      'appNgxDatatableDblClick'
    );
  }
}