I am using ngx-datatable to create a list of settings items that can be edited, added to, and deleted from. What I want to do is have the row of data with an Edit button on the end of the line. When I click the edit button, the cell becomes editable, and a Save and Cancel button each appear at the end of the line and the edit button disappears. Then when you click either the Save or Cancel button, the cell is no longer editable and the edit button once again appears on the line. I am trying to use a method to handle the editing and switch to the Save and Cancel buttons.
My HTML, without the method, is as follows:
<ng-template let-value="value" let-rowIndex="rowIndex" ngx-datatable-cell-template>
<span class="mobile-hidden button-spacing">
<button ion-button small *ngIf="editing != rowIndex" (click)="editing[rowIndex + '-name'] = true">Edit</button>
<button ion-button small *ngIf="editing === rowIndex" (click)="updateValue($event, 'name', rowIndex)">Save</button>
<button ion-button outline small *ngIf="editing === rowIndex">Cancel</button>
</span>
</ng-template>
With that HTML, when I click Edit, the Name cell becomes editable. I currently have to tab away or click on another area of the table to make the cell uneditable. And when I'm editing the cell, the Edit button remains on the screen, and neither the Save nor Cancel buttons appear.
I am trying to use a method with the Edit button instead in order to bring up the Save and Cancel buttons. The new line reads as follows:
<button ion-button small *ngIf="editing != rowIndex" (click)="storeOldValues(rowIndex)">Edit</button>
I then create the function in the TypeScript file:
storeOldValues(rowIndex) {
this.nameOld = this.rows[rowIndex].name;
this.editing[rowIndex + '-name'] = true;
this.editing = rowIndex;
}
With that method in place, the Save and Cancel buttons appear when I click on Edit (third line of the method), but I am not able to actually edit the cell. The problem would seem to be using both the second and third lines of the method together, because when I comment out the third line the cell is once again editable but the Save and Cancel buttons don't appear.
I got the second line of the method from the ngx-datatable demo code, but I don't really understand how it works. I am wondering if that is part of the reason I can't get the code to work. Specifically, how does "rowIndex + '-name'" work? It looks like it would just concatenate the literal word "-name" to the rowIndex, but I am sure that is not what it does. How does this make the name cell editable? What's the purpose of the minus sign in front of name? And is there a better way to do what I'm trying to do?
Thanks!
