[Bug] datatable click event problem

[luis-cosillo]

Version

2.6.0

Reproduction link

https://user-images.githubusercontent.com/11168170/134721286-260359ff-9c7b-4ba7-87c2-80a71a6fcff1.mp4

Operating System

windows 10

Device

Mobile

Browser & Version

Chrome 93.04577.82

Steps to reproduce

create void in datatable.component.ts of the original template to download, with a message to console. 2.in the html in the delete button from the table, add the ng-click pointing to the created void. 3.run the application and from a pc verify that it sends the message to the console. 4.verify on any mobile device that the delete button from a row sends the message to the console 5.inspect the delete element from the datatable, and check if the button click event appears in the event.listener

What is expected?

what is expected to execute the functions that are placed in the ng-click that if it is executed in a pc but when passing it to mobile in the original template it does not execute. Use the original downloaded template to reproduce the error.

What is actually happening?

when I inspect the button of a datatable, and check the event.listeners the event click on mobile was removed in some functionality of the template they removed it.

---

Solution

Additional comments

I bought the template and I am using it for a project, but the click event when viewing the datatables on mobile phones does not run. When I review, I see that the problem is that when viewing it on a mobile phone in the event.listeners, the click event was eliminated.

As you will see in the video when checking in the event.listener the event was eliminated when wanting to see the template in a mobile. And I need to execute a code that is in the typescript file

You can help me by indicating where I can see in the template that I buy that does not eliminate the events of the td-actions column

[rarestoma]

Hi @luis-cosillo,

Thank you for working with our products and for pointing us this issue.

We will do some tests to see what happens and how can we fix this issue.

Best regards, Rares

[luis-cosillo]

I would like to know if you already have any feedback regarding this problem.

[luis-cosillo]

good gentlemen I would like to know if you found any solution to the problem of the datatable that includes the template ???

[rarestoma]

Hi @luis-cosillo,

Sorry for our late response.

We tested it but we didn't find yet a solution. Can you please provide us the code that you used so we can see how did you used ng-click pointing to the created void?

Thank you, Rares

[luis-cosillo]

I share the part where I put a simple ng-click, but when making the screen small the event no longer works HTML:

<div class="material-datatables">
                          <table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
                                <thead>
                                    <tr>
                                      <th>{{ dataTable.headerRow[0] }}</th>
                                      <th>{{ dataTable.headerRow[1] }}</th>
                                      <th>{{ dataTable.headerRow[2] }}</th>
                                      <th>{{ dataTable.headerRow[3] }}</th>
                                      <th>{{ dataTable.headerRow[4] }}</th>
                                      <th class="disabled-sorting text-right">{{ dataTable.headerRow[5] }}</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                      <th>{{ dataTable.footerRow[0] }}</th>
                                      <th>{{ dataTable.footerRow[1] }}</th>
                                      <th>{{ dataTable.footerRow[2] }}</th>
                                      <th>{{ dataTable.footerRow[3] }}</th>
                                      <th>{{ dataTable.footerRow[4] }}</th>
                                      <th class="text-right">{{ dataTable.footerRow[5] }}</th>
                                    </tr>
                                </tfoot>
                                <tbody>
                                    <tr *ngFor="let row of dataTable.dataRows">
                                        <td>{{row[0]}}</td>
                                        <td>{{row[1]}}</td>
                                        <td>{{row[2]}}</td>
                                        <td>{{row[3]}}</td>
                                        <td>{{row[4]}}</td>
                                        <td class="td-actions text-right">
                                          <a href="javascript:void(0)" class="btn btn-link btn-info btn-just-icon like">
                                              <i class="material-icons">favorite</i>
                                            </a>
                                          <a href="javascript:void(0)" class="btn btn-link btn-warning btn-just-icon edit"><i class="material-icons">dvr</i></a>
                                          <a href="javascript:void(0)" class="btn btn-link btn-danger btn-just-icon remove"  (click)="prueba()"><i class="material-icons">close</i></a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

TypeScrip: In the ts I have a simple procedure that only sends me a message to the consulate, but making the datatable responsive removes the events

  prueba(){
        console.log('Entro al TS');
    }

your support is appreciated