Answers

• tangerine Posts: 3,350Questions: 37Answers: 394

  March 2017

  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 Posts: 5Questions: 0Answers: 0

  August 2017 edited August 2017

  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 Posts: 19Questions: 6Answers: 0

  August 2017

  I've noticed the same thing.
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  August 2017

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

  Thanks,
  Allan
• MrTwinkles Posts: 5Questions: 0Answers: 0

  August 2017

  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 Posts: 5Questions: 0Answers: 0

  August 2017 edited August 2017

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  August 2017

  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 Posts: 5Questions: 0Answers: 0

  August 2017 edited August 2017

  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.

  image.png 105.9K
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  August 2017

  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 Posts: 1Questions: 0Answers: 0

  March 2019 edited March 2019

  $.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.

  Screenshot from 2019-03-29 13-27-38.png 105.2K

  Screenshot from 2019-03-29 13-28-18.png 109K
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  March 2019

  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