Angular click events not working on expanded columns in jquery responsive datatable

Question

I'm using jquery responsive datatable with my angular 6 application. I want to put two button at the last td in each row. But none of the events are working on the collapsed tds.

After setting below property on the datatable, events are working but after each event, buttons are repeated. At first I have 2 buttons, after clicking on the button and completing the operation, i get 4 buttons, and buttons keeps on increasing.

Datatable configuration:
const table: any = $('#contract-table');
        table.DataTable().destroy();
        this.dataTable = table.DataTable({
          responsive: {
            details: {
                renderer: Responsive.renderer.listHiddenNodes()
            }
          }
        });

Angular code: 

<table class="table table-hover dt-responsive nowrap" id="contract-table" cellspacing="0">
              <thead class="thead-dark">
                  <tr>
                      <th>Contract Number</th>
                      <th>Contract Title</th>
                      <th>Contract Type</th>
                      <th>DUNS</th>
                      <th>Cage Code</th>
                      <th>DoDAAC</th>
                      <th>DCMA Administered</th>
                      <th>Category</th>
                      <th>Customer/Agency</th>
                      <th>Customer/Agency Other</th>
                      <th>Contract Clauses</th>
                      <th>PWS/SOW Authroization Data</th>
                      <th>Contract Dollar Value</th>
                      <th>Contract Classification</th>
                      <th>Indefinite Delivery Contract</th>
                      <th>Indefinite Delivery Type</th>
                      <th>Contract Description</th>
                      <th></th>
                  </tr>
              </thead>
              <tbody>
                  <tr *ngFor="let contract of contracts" (click)="selectedContract = selectedContract && selectedContract.id === contract.id ? null : contract" [ngClass]="{'selected-contract': selectedContract && selectedContract.id === contract.id}">
                      <td>{{contract?.contractNumber}}</td>
                      <td>{{contract?.title}}</td>
                      <td>{{contract?.contractType}}</td>
                      <td>{{contract?.duns}}</td>
                      <td>{{contract?.cageCode}}</td>
                      <td>{{contract?.doDAAC}}</td>
                      <td>{{contract?.dcmaAdministered ? 'Yes' : 'No'}}</td>
                      <td>{{contract?.category}}</td>
                      <td>{{contract?.customerAgency}}</td>
                      <td>{{contract?.customerAgencyOther}}</td>
                      <td>{{contract?.contractClauses}}</td>
                      <td>{{contract?.authorizationData}}</td>
                      <td>{{contract?.contractDollarValue}}</td>
                      <td>{{contract?.contractClassification}}</td>
                      <td>{{contract?.indefiniteDeliveryContract ? 'Yes' : 'No'}}</td>
                      <td>{{contract?.indefiniteDeliveryType}}</td>
                      <td>{{contract?.contractDescription}}</td>
                      <td>
                        <div class="row pull-right">
                            <div class="col pr-0">
                                <button mat-button class="btn btn-custom btn-bordred btn-block" (click)="onCreateSubContract('edit', contract)">Edit</button>
                            </div>
                           <div class="col">
                              <button mat-button class="btn btn-custom btn-bordred btn-block btn-create-sub-contract" (click)="onCreateSubContract('sub', contract)">Create Subcontract</button>
                           </div>
                        </div>
                      </td>
                  </tr>
              </tbody>
</table>

angular click events should work fine.

Please share any working fiddle for more clarification. Thanks — Hassan Siddiqui, Mar 28 '19 at 16:01
https://stackblitz.com/edit/angular-bv9bdw Here is the fiddle. But this is not working fine. Jquery datatables are not loading there. Please help with that as well. If datatables are loaded fine, button events will stop. Since datatables are not working now, button events are working — , Mar 29 '19 at 07:41

score 0 · Answer 1 · answered Mar 29 '19 at 09:25

0

Just change your (click)="selectedContract = selectedContract && selectedContract.id === contract.id ? null : contract" to (click)="selectedContractMethod()" and move your code to separate method in ts file.

selectedContractMethod() {
  // Paste your code here
}

I hope it'll resolve your issue. Thanks

answered Mar 29 '19 at 09:25

Hassan Siddiqui

2,799
1
13
22

that is working fine already. buttons in the td are not working when the responsive columns are in expanded form. onCreateSubContract() is not working – Mar 29 '19 at 09:32
Both `Edit` and `Create Subcontract` **(click)** working fine, they also print **event** string in console. Please review it. Thanks – Hassan Siddiqui Mar 29 '19 at 09:36
that is because datatable is not loaded properly and columns are expanding and collapsing. issue persists only when the columns are in expanded form. In console there is an error "ERROR Error: table.DataTable is not a function" – Mar 29 '19 at 10:11
Can you share the link where your datatable, expanding and collapsing working properly? Thanks – Hassan Siddiqui Mar 29 '19 at 10:21

Angular click events not working on expanded columns in jquery responsive datatable

1 Answers1