DataTable Column with Template onRowClick/onRowSelect not firing

[Xamlware]

I'm submitting a ... (check one with "x")

[ x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.

http://plnkr.co/edit/NtWWnN

Current behavior

Neither onRowClick nor onRowSelect fire if there is a template column in the datatable. If I remove the template, then all is well, but I need the template.

Expected behavior

That all events fire as normal.

Minimal reproduction of the problem with instructions

I don't know how to use plunker and haven't been able to get one running successfully. Here is a code snippet indicating the problem.

                                <p-panel [toggleable]="false">
                                    <header>
                                        <i *ngIf="isSearch" class="fa fa-spinner fa-pulse"></i> &nbsp;&nbsp; Search results
                                        for '{{searchText}}'
                                    </header>
                                    <!---->
                                    <p-dataTable [value]="searchResults" selectionMode="single" (onRowSelect)="onRowSelect($event)" (onRowClick)="onFoodSelect($event)"
                                        [responsive]="true" [stacked]="stacked" [paginator]="true" [rows]="10" [pageLinks]="5"
                                        [rowsPerPageOptions]="[5,10,15,20]">
                                        <p-column field=" name " header="Food item " [style]="{ 'width': '250px',
                                        'text-align': 'left'} ">
                                            <template let-col let-row="rowData " pTemplate type="body ">
                                                <div>
                                                    <div class='searchItem'>{{row[col.field]}}</div>
                                                    <div class='searchItemDetail'>{{row['company']}} | {{row['size']}} | cal: {{row['cals']}} / c: {{row['carbs']}}
                                                        / p: {{row['pro']}} / f: {{row['fat']}} </div>
                                                </div>
                                            </template>
                                        </p-column>
                                        <!---->
                                    </p-dataTable>
                                </p-panel>

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

angular-cli: 1.0.0-beta.19-3
node: 6.3.1
os: win32 x64

• Angular version: 2.0.X

2.2.0-beta.0

• PrimeNG version: 2.0.X

1.0.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

all

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  typescript 2.0.7
• Node (for AoT issues): node --version =

[Svrkota-S]

Any updates on this problem?

[trgllc]

Here is a plnkr to demonstrate the issue. It will let you select a row outside of the text(template), but not select the text.

http://plnkr.co/edit/IRqZFS7azPXqQUIVPFIB?p=preview

Seems to be related to this code in DataTable.js

DataTable.prototype.handleRowClick = function (event, rowData) {
var targetNode = event.target.nodeName;
if (targetNode == 'TD' || (targetNode == 'SPAN' && !this.domHandler.hasClass(event.target, 'ui-c'))) {

If we revert the code back, the select works again.

DataTable.prototype.handleRowClick = function (event, rowData) {
var targetNode = event.target.nodeName;

if (targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A'
|| (this.domHandler.hasClass(event.target, 'ui-c'))) {
return;
}

//if (targetNode == 'TD' || (targetNode == 'SPAN' && !this.domHandler.hasClass(event.target, 'ui-c'))) {

[Elanor-L]

Same issue here even with the 2.0.RC1. Thanks for the workaround !

[Svrkota-S]

Are there any plans to change this behaviour? This is one of those really annoying bugs that shouldn't be too hard to fix.

[Elanor-L]

I got this problem only when there's a template with a div inside the table cell. When removing the div element, the event works just fine.

[Svrkota-S]

You are right, i just tested it. Solution is to use span with display: block/inline-block instead of div I guess. Thanks a lot for this!

[petertangelder]

I'm facing the same issue. Without templates, selecting rows works just fine. With a template, I can only select a row when clicking an empty area in the row. Using a span with display block does not fix the issue for me unfortunately.

[damonwildercarr]

Same issue here - using version 4.0.1 with Angular 4.1.2. However this appears to be related to the use of the innerHTML property (if I use innerText it works fine):

<p-column field="description" header="Description" [style]="{'width':'55%'}" [sortable]="true" [filter]="true" filterMatchMode="contains">
  <ng-template let-col let-attribute="rowData" pTemplate="body">
    <span [style]="{'display': 'block'}" [innerHTML]="attribute.description"></span>
  </ng-template>
</p-column>

[damonwildercarr]

I get around this by changing above to the following:

<p-column field="description" header="Description" [style]="{'width':'55%'}" [sortable]="true" [filter]="true" filterMatchMode="contains">
  <ng-template let-col let-attribute="rowData" pTemplate="body">
    <span (click)="clickDescriptionItem($event)" [innerHTML]="attribute.description"></span>
  </ng-template>
</p-column>

Then in the (click) I do the following:

clickDescriptionItem(event: any) {

    var item = <HTMLElement> event.srcElement.parentElement;
    simulatedClick(item, {});
}

This uses the simulatedClick function:

function simulatedClick(target, options) {

var event = target.ownerDocument.createEvent('MouseEvents'),
options = options || {},
opts = { // These are the default values, set up for un-modified left clicks
type: 'click',
canBubble: true,
cancelable: true,
view: target.ownerDocument.defaultView,
detail: 1,
screenX: 0, //The coordinates within the entire page
screenY: 0,
clientX: 0, //The coordinates within the viewport
clientY: 0,
ctrlKey: false,
altKey: false,
shiftKey: false,
metaKey: false, //I think 'meta' is 'Cmd/Apple' on Mac, and 'Windows key' on Win. Not sure, though!
button: 0, //0 = left, 1 = middle, 2 = right
relatedTarget: null,
};

//Merge the options with the defaults
for (var key in options) {
if (options.hasOwnProperty(key)) {
opts[key] = options[key];
}
}

//Pass in the options
event.initMouseEvent(
opts.type,
opts.canBubble,
opts.cancelable,
opts.view,
opts.detail,
opts.screenX,
opts.screenY,
opts.clientX,
opts.clientY,
opts.ctrlKey,
opts.altKey,
opts.shiftKey,
opts.metaKey,
opts.button,
opts.relatedTarget
);

//Fire the event
target.dispatchEvent(event);
}

Works for me.

[eliasdraexler]

I had the same problem, i fixed it by making the element in the template "click through able".
I added a css class to the element in the template:
.click-through{ pointer-events: none; }
Therefore the datatable onRowSelect event gets triggered.

[JDillon522]

I have the same issue.

I have a <p-checkbox> rendered in a column that binds to my data. The data binds correctly but clicking the checkbox does not trigger the onRowClick.

To get it to work I changed the suggested code from:

DataTable.prototype.handleRowClick = function (event, rowData) {
        var targetNode = event.target.nodeName;
        if (targetNode == 'TD' || (targetNode == 'SPAN' && !this.domHandler.hasClass(event.target, 'ui-c'))) {

To:

DataTable.prototype.handleRowClick = function (event, rowData) {
        var targetNode = event.target.nodeName;
        if (targetNode == 'DIV' || targetNode == 'TD' || (targetNode == 'SPAN' && !this.domHandler.hasClass(event.target, 'ui-c'))) {

Is there a way to overwrite the method in your project somewhere somehow?

How is it that this has not had any traction or comments from maintainers?