PrimeNG select datatable cell

Question

I am working on a project using Angular 4 and PrimeNG where I need to be able to double click on a cell, selected it and open a dialog to do some modifications on the cell's underlying data.

As far as I can see from the documentation, currently there is no way to accomplish this. What is the best way to handle this situation?

Thanks.

Answer 1

So after some playing around I came up with a solution, which being far from perfect serves the purpose while we wait for the folks from PrimeNG (which I love, btw) to include this functionality.

The first issue was to determine which cell the user double-clicked on. I did that by having all column's templates in a div which I can get a reference to:

<p-dataTable #grd [value]="view" 
               (onRowDblclick)="editTemplate($event)" 
               (onRowClick)="clearSelection($event)">
        <p-column field="SomeFieldName" header="Header" [editable]="false">
            <ng-template let-col let-data="rowData" pTemplate="body">
                <div [id]="col.field" class="cell-content">
                    <div [innerHTML]="data[col.field]" class="center-parent-screen"></div>
                </div>
            </ng-template>
        </p-column>

All columns I am interested in handling on double click are wrapped in the div with class cell-content. Also notice the id attribute. It is set to match the field. Then in the onRowDblclick event:

editTemplate(e: any) {
        let target = e.originalEvent.toElement.closest('div.cell-content');
        if (target && target.id) {
            let td = target.closest('td');
            if (td) {
                td.style.backgroundColor = 'darkorange';
                td.style.color = 'white';
            }

            let fieldValue = e.data[target.id];
            //do something with this data
        }
    }

The key here is the id attribute. Once we have that now we know which cell was clicked and we can proceed to do what we need to do. Also notice that I get a reference of the parent TD element and set the background and the color of the cell. Once you are finished working with it, you can clear the formatting to go back to normal.

You can also use the onRowClick event to clear the selection like so:

    clearSelection(e: any) {
        let target = e.originalEvent.toElement.closest('div.cell-content');
        if (target && target.id) {
            let td = target.closest('td');
            if (td) {
                td.style.backgroundColor = 'white';
                td.style.color = 'black';
            }
        }
    }

I know manipulating the DOM directly is not the way to go, but until we get the new version of PrimeNG that includes this functionality, this will do, at least for me.

Please let me know if you have a better way of doing this.