Id is returned as undefined onclick event

Question

I am trying to fetch the Id of the record when user clicks on edit, this is little different out of box implementation rather than regular edit functionality in lightning datatable. Using custom datatable where incorporating edit functionality in the column by custom type, so passing record id as typeattribute. I am getting the record id's correctly in the connetedcallback as well as renderedcallback of the custom type column of the custom datatable. But when clicking on the icon in the handleedit call I am not able to capture the id of the record as expected.

Need the value of record id (id of the record row on which the icon exists) when clicked on the edit icon in the datatable.

Below is the code snippet

<lightning-button-icon icon-name="utility:edit"  alternative-text="Edit" title="Edit" variant="container" onclick={handleEdit} key={accountId} id={accountId}>{accountId}</lightning-button-icon>
 
connectedCallback(){
        console.log('connected  ', this.accountId); //getting correct record id
    }
    renderedCallback(){
        console.log('rendered ', this.accountId); //getting correct record id
    }

    handleEdit(event){        
        console.log('event ',event.currentTarget.dataset.id); //getting as undefined and when checked currentTarget in console is returning null.
        console.log('event ', event.target.value); //is also returning undefined.
    }````

Thank you.

On <lightning-button-icon> element instead of using just id, use data-id, and that should solve your problem. — Gaurav Kumar
– Gaurav Kumar, Commented Oct 31, 2023 at 10:33

mvogelgesang · Accepted Answer · 2023-11-13 18:33:17Z

In your button, add a new attribute data-id and set it equal to your record ID value. Within your onclick handler, you can consume it without changing any existing code. Full html and js below:

import { LightningElement, wire } from "lwc";
import { getRecords } from "lightning/uiRecordApi";
import ID_FIELD from "@salesforce/schema/Account.Id";
import NAME_FIELD from "@salesforce/schema/Account.Name";
import PHONE_FIELD from "@salesforce/schema/Account.Phone";
export default class Table extends LightningElement {
  error;
  accountRecords = [];
  hasData = false;

  @wire(getRecords, {
    records: [
      {
        recordIds: [
          "0017g00001hzAbYAAU",
          "0017g00001hzAbTAAU",
          "0017g00001hzAbJAAU",
          "0017g00001hzAbEAAU"
        ],
        fields: [ID_FIELD, NAME_FIELD, PHONE_FIELD]
      }
    ]
  })
  wiredRecords({ error, data }) {
    if (data) {
      let dataarray = [];
      data.results.forEach((record) => {
        dataarray.push(record.result.fields);
      });
      this.accountRecords = [...dataarray];
      this.hasData = true;
      this.error = undefined;
    } else if (error) {
      this.error = error;
    }
  }

  handleEdit(event) {
    console.log("event ", event.currentTarget.dataset.id);

  }
}

<template>
  <template lwc:if={hasData}>
    <template for:each={accountRecords} for:item="record">
      <tr key={record.Id.value}>
        <td>
          <lightning-button-icon
            icon-name="utility:edit"
            alternative-text="Edit"
            title="Edit"
            variant="container"
            onclick={handleEdit}
            key={record.Id.value}
            data-id={record.Id.value}
          ></lightning-button-icon>
        </td>
        <td>{record.Name.value}</td>
        <td>{record.Id.value}</td>
        <td>{record.Phone.value}</td>
      </tr>
    </template>
  </template>
</template>

Collectives™ on Stack Overflow

Id is returned as undefined onclick event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related