Hi, I'm using html table not standard data table now I want to edit record and for that i need need recordId using onclick in to pass into lightning-record-edit-from so how I will get the id. and If I'm wrong please tell me how I will do it.
Thanks in advance.
#LWC #Table Component #Javascript Code #Salesforce Developer #Trailblazers #TrailblazerCommunity
Hi @Rashid Minhas,
Modify your html like below
<tbody>
<template for:each={Tasks} for:item="task">
<tr key={task.Id}>
<td>{task.Name}</td>
<td>{task.Start_Date__c}</td>
<td>{task.Due_Date_c}</td>
<td>{task.Actual_completion_Date_c}</td>
<td>{task.Status_c}</td>
<td>{task.Owner.Name}</td>
<td class="slds-size_1-of-10" data-label="">
<a onclick={openEditModal} data-id={task.Id}>
<lightning-icon icon-name="utility:edit" alternative-text="edit" title="Edit" size="xx-small"></lightning-icon>
</a>
<a onclick={handleDelete}>
<lightning-icon icon-name="utility:delete" alternative-text="delete" title="Delete" size="xx-small" class="slds-m-left_x-large"></lightning-icon>
</a>
</td>
</tr>
</template>
</tbody>
As you can see, we have added a data-id attribute to the anchor element that triggers the openEditModal() function. This attribute will store the record ID of the task that needs to be edited.
you can modify the openEditModal() function to retrieve the record ID from the data-id attribute and pass it to the lightning-record-edit-form component:
openEditModal(event) {
var recordId = event.currentTarget.dataset.id;
var editForm = this.template.querySelector('lightning-record-edit-form');
editForm.recordId = recordId;
editForm.submit();
}
