In Angular click event handler does not working when we click on sorting or pagination.

In Angular click event handler does not working when we click on sorting or pagination.

subbu_palnatisubbu_palnati Posts: 4Questions: 1Answers: 0
edited December 4 in Free community support

At very first initial load of the page edit button is working fine, but when we click on sort or navigated different page edit functionality is not working.

<div class="mat-elevation-z8">
    <table datatable class="row-border hover" id="table" [dtOptions]="dtOptions" [dtTrigger]="dt"
           *ngIf="bookings && bookings.length > 0">
        <thead>
        <tr>
            <th class="sortingId-1">Guest Information</th>
            <th class="sortingClass" style="width:25% !important" >Date Submitted</th>
            <th class="sortingId" style="width:25% !important">Stateroom</th>
            <th class="sortingClass">Ticket ID</th>
            <th class="sortingId" style="width:25%; padding-left: 0px !important; padding-right: 19px !important;">Status</th>
            <th class="sortingId"></th>
        </tr>
        </thead>
        <tbody class="textdata">
        <tr *ngFor="let booking of bookings">
            <td><span
                    class="guest-info-span"> {{booking.firstName | titlecase }} {{booking.lastName | titlecase}}</span>
                <span class="guest-info-span-email">{{booking.emailAddress | lowercase}}</span></td>
            <td><span class="guest-info-span"> {{booking.orderedDate | dateFormatter}}</span> <span
                    class="guest-info-span-email">{{booking.orderedDate | timeFormatter}}</span></td>
            <td>{{booking.stateroom}}</td>
            <td>{{booking.ticketId}}</td>
            <td style="padding:8px 3px !important;width:200% !important;">{{booking.ticketStatus | titlecase}}</td>

** <td class="material-icons" style="color: #0097FE; padding-left: 60px" (click)="openDialog(booking.ticketId)">create</td>**
</tr>
</tbody>
</table>
</div>

Replies

  • kthorngrenkthorngren Posts: 7,010Questions: 22Answers: 1,529

    See if this FAQ helps:
    https://datatables.net/faqs/index#events

    Kevin

  • subbu_palnatisubbu_palnati Posts: 4Questions: 1Answers: 0
    edited December 10

    Hi Kevin.. i didn't find any examples related to angular for this problem,

    <td class="material-icons" style="color: #0097FE; padding-left: 60px" (click)="openDialog(booking.ticketId)">create</td>
    
        openDialog(item) {
            console.log("entered");
            const editDialog = this.dialog.open(DialogComponent, {
                data: {
                    item
                }
            });
    

    this is how i am handing this function, can you please someone help me how to solve this issue. it is working fine in the first page or without sorting but edit click is not working when we click on sort or naviagate to diffrent page

  • colincolin Posts: 6,897Questions: 0Answers: 1,179

    As Kevin said, try using delegated events in your event listener (you haven't shown that code).

    If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

Sign In or Register to comment.