When using the PrimeNG table with a custom modal component that I created, I encountered an issue. The edit functionality works correctly and retrieves the correct row id, however, the delete function always returns the id of the first row.
dashboard.html
<p-table #dt [value]="iToDoList" dataKey="id" [paginator]="true" [rowsPerPageOptions]="[10,50,100]"
[rows]="10">
<ng-template pTemplate="header">
<tr>
<th>ID</th>
<th>Comment</th>
<th>Action</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-row>
<tr>
<td>{{row.id}}</td>
<td>
<div *ngIf="!row.isEditable">{{row.comment}}</div>
<div *ngIf="row.isEditable">
<input type="text" [(ngModel)]="row.comment">
<span *ngIf="isEmpty(row.comment)" style="color:crimson">Required</span>
</div>
</td>
<td>
<div>
<modal [row]="row" [disableEditSaveButton]='disableSaveButton' (deleteRow)="onDeleteToDoList(row)" [showModal]="!row.isEditable" (selectedRow)="onSelectedRow(row)" (cancelEdit)="onCancelEdit(row)" (save)="onSave(row)"></modal>
</div>
<!--<button (click)="editRow(row)">Edit</button>-->
</td>
<td> <button (click)="save(row)">Save</button></td>
</tr>
</ng-template>
</p-table>
dashboard.component
//The issue manifests itself in how the delete method always returns the same id
onDeleteToDoList(row) {
console.log('ON DELETe '+ row.id);
}
//The onSave method successfully returns the id of the current selected row
onSave(row)
{
console.log('ON save '+ row.id);
}
modal.html
The problem lies within the confirm method which initially returns the correct row id, but when the user clicks "OK", it always shows the id of the first row in the table
<div>
<div *ngIf='showModal'>
<span class="fa fa-edit" (click)="onEdit()">
</span>
//The confirm method retrieves the right id initially
<span class="fa fa-trash-o" (click)="confirm()" data-toggle="modal" data-target="#myModal">
</span>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirm</h4>
</div>
<div class="modal-body">
<p>Delete this record?</p>
</div>
<div class="modal-footer">
//The onOk method consistently shows the id of the first row
<button type="button" class="btn btn-primary" data-dismiss="modal" (click)="onOk()">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div>
<div>
</div>
</div>
</div>
</div>
</div>
modal.component
@Output() deleteRow: EventEmitter<any> = new EventEmitter();
@Output() save: EventEmitter<any> = new EventEmitter();
@Output() edit: EventEmitter<any> = new EventEmitter();
@Input() row: any;
//The onSave method is functioning as expected
onSave() {
this.save.emit(this.row);
}
//This portion is causing the incorrect id to be displayed
onOk() {
this.showModal = true;
console.log("inside " + this.row.id);
this.deletedRow.emit(this.row);
}
//Correctly displays the id
confirm()
{
console.log("confirm " + this.row.id);
}
***********************************************UPDATE****************************************** Modal.html
This update has resolved the issue
<div *ngIf='showModal'>
<span class="fa fa-edit" (click)="onEdit()">
</span>
<span class="fa fa-trash-o" (click)="BeforeModalOpen()" data-toggle="modal" data-target="#myModal">
</span>
<div class="modal fade" id="myModal" role="dialog" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirm</h4>
</div>
<div class="modal-body">
<p>Delete this record {{row.id}}?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="onOk()">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div>
<div>
</div>
</div>
</div>
</div>
modal.component
BeforeModalOpen properly displays the correct ID while onOK continues to show the wrong one.
BeforeModalOpen() {
// Reset the sessionStorage if needed
if(sessionStorage.getItem('tempRow')){
sessionStorage.removeItem('tempRow');
}
console.log("inside BeforeModalOpen " + this.row.id);
// Convert object to JSON string and store it
sessionStorage.setItem('tempRow', JSON.stringify(this.row));
}
onOk() {
// Parse the stored JSON back into an object
const tempRow = JSON.parse(sessionStorage.getItem('tempRow'));
// Check for correctness
console.log("inside " + this.tempRow.id);
// Emit the event
this.deletedRow.emit();
// Close the modal
$('#myModal').modal('hide');
}
dashboard.component
onDeleteToDoList() {
const tempRow = JSON.parse(sessionStorage.getItem('tempRow'));
tempRow.isEditable = false;
this.showEditOption = false;
//this.iToDoList.filter(row => row.isEditable).map(r => { r.isEditable = false; return r })
console.log('ON DELETe '+ tempRow.id);
}