Issue
I'm using a PrimeNG Table, and I would like to handle saving row editing programmatically in the case that there are any custom validation errors that need to be addressed beforehand in edit mode. Currently, I have added pSaveEditableRow to a button, which on click, ends row editing and saves edits made to the row. I need to override this and do some validation beforehand. How can this be accomplished?
I've looked into the documentation for PrimeNG, and it looks like I may be able to call the 'saveRowEdit' function, but I need to pass rowData and rowElement, both of which come from pEditableRow, and pEditableRow appears to be set to an object with properties needed for the table.
Solution
For those who want to end edit mode on a row manually, I've found a solution:
Remove
pSaveEditableRow
from yourbutton
tag (if you have added it). As the documentation states,pSaveEditableRow
simply switches the row back to view mode.Add
#htmlTableRowElement
to your<tr>
tag:<tr [pEditableRow]="rowData" #htmlTableRowElement>...</tr>
Pass
rowData
andhtmlTableRowElement
in to the(click)
function on thebutton
tag.Add
import { Table } from 'primeng/table'
to your component.Add
@ViewChild('dt', { static: false }) table: Table
to your component.Add
#dt
to your<p-table>
:<p-table #dt>...</p-table>
You can now call
this.table.saveRowEdit(rowData, htmlTableRowElement)
in your function which is invoked on button click. This will end edit mode for the row and put it into view mode.rowData
is a type of any (an object containing your row data), andhtmlTableRowElement
is pretty self-explanatory.
Hope this helps!
Answered By - tb517
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.