href and onclick gets lost if responsive extension is hiding columns

Juergen

I'm using href and onclick in my tables. As soon as the responsive extension hides a column with <td><a onclick='...' href='...'></td> it gets lost.

tangerine

Please show your code, or provide a test case showing the problem as per the forum rules.
https://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read#latest

MrTwinkles

Hi,

As of version 1.10.15 i am also experiencing this issue. I have action controls (edit/remove) in the last column with routerLink bindings (angular4). When responsive hides the columns, the action are no longer triggered. The routerLink binding is much like an href in that it changes the current URL to change to a different page. When the controls are visible in the table, the routerLink binding is triggered.

Code example below:

<table id="datatables" class="table table-striped table-no-bordered table-hover responsive nowrap" cellspacing="0" width="100%" style="width:100%">
  <thead>
     <tr>
        <th>Request #</th>
        <th>Category</th>
        <th class="text-center">Request Date</th>
        <th class="text-center">Status</th>
        <th class="text-right">Actions</th>
     </tr>
  </thead>
  <tbody>
     <tr *ngFor="let request of requests">
        <td>{{ request.id }}</td>
        <td>{{ request.category }}</td>
        <td class="text-center">{{ request.requestDate | tDate | date }}</td>
        <td class="text-center">{{ getStatus(request.status).value }}</td>
        <td class="td-actions text-right">
           <button *ngIf="request.status === 1" [routerLink]="['/initiate']" [queryParams]="{'id': request.requestId}" type="button" rel="tooltip" title="Edit" class="btn btn-info btn-icon btn-fill btn-xs">
              <i class="material-icons">mode_edit</i>
           </button>
           <button *ngIf="request.status === 1" [routerLink]="['/initiate/results']" [queryParams]="{'id': request.requestId}" type="button" rel="tooltip" title="View" class="btn btn-success btn-icon btn-fill btn-xs">
              <i class="material-icons">keyboard_arrow_right</i>
           </button>
           <button *ngIf="request.status > 1" [routerLink]="['summary']" [queryParams]="{'id': request.requestId}" type="button" rel="tooltip" title="View" class="btn btn-success btn-icon btn-fill btn-xs">
              <i class="material-icons">keyboard_arrow_right</i>
           </button>
           <button (click)="onDelete(request)" [disabled]="deleting" type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-icon btn-fill btn-xs">
              <i class="material-icons">clear</i>
           </button>
        </td>
     </tr>
  </tbody>
</table>

liviu.daniel

I've noticed the same thing.

allan

Can you link to a test case showing the issue please?

Thanks,
Allan

MrTwinkles

Hi Allan,

I can give you a link to our QA site but you will have to create a user account and go through a few steps to get things setup 1st.

But essentially click events are not being fired once the control is moved by responsive...

MrTwinkles

The best work around (and probably best option regardless) is to have the column not be hidden at all using the priority option. My controls are in the very last column and as a result, they get hidden 1st so adding a priority to it like <th data-priority="1" class="text-right">Actions</th> means it will take highest priority and will be the very last column to be hidden and in my case it will never be hidden because the visible area does not get that small.

allan

I'm afraid I don't know Angular very well, but it sounds like it isn't binding event listeners automatically into the child row, which I presume the (click) attribute it meant for? Is that attribute present in the information shown in the child row if you "Inspect" it in your browser?

Allan

MrTwinkles

That was my initial thought as well but inspecting it showed that both original controls and child row controls are identical. In the screenshot you will see the attribute _ngcontent-c4, this attribute is added to all elements by Angular at runtime and i think this might have something to do with it since these attributes do not exist on the elements added by responsive since responsive will not know to do this and hence Angular does not recognise the controls anymore, since the chain is broken, and will not execute any listeners on them (presumably for security reasons).

In a nutshell, this is not something that can be fixed on your side. So only solution is to have the controls not be hidden by responsive by using the priority.

As for the onclick and href attributes not working, that is something completely different since those are standard html attributes. So i cannot see any reason for those to not be working.

allan

There is actually one possibility. Try using:

responsive: {
  details: {
    renderer: $.fn.dataTable.Responsive.renderer.listHiddenNodes()
  }
}

You'll need to be using the 2.2.0-dev code for it to work. It moves the nodes around, rather than copying the HTML, so any listeners would go with them. Its not released yet, as I it hasn't been tested under all conditions yet, but that might just do the trick.

Allan

ash6892

$.fn.dataTable.Responsive.renderer.listHiddenNodes() works. but it copies my content when i come back to this page. My application is a single page application in angular. and when i come back on the same page, i see all the tds twice. if i come back third time, i see the tds thrice. and this keeps on going. See the attached files.

allan

If you could link to a page showing the issue that would be useful, but I am aware that there are one or two quirks with the nodes renderer at the moment. I've not had a chance to try and iron them out yet. I'm not sure what the interaction with Angular would do, particularly on a back button.

Allan