0

I have used a custom lightning datatable which has a component displayed as a lookup

customLightningDatatable.html

 import LightningDatatable from 'lightning/datatable';
 import lookupTemplate from './lookupTemplate.html';

 export default class CustomLightningDatatable extends LightningDatatable {
     static customTypes = {
          fileUpload: {
             template: fileUploadTemplate,
             typeAttributes: ['acceptedFormats'],
          },
          lookup: {
             template: lookupTemplate,
          }
      };    
   }

Code for the lookupTemplate.html which has been imported

  <template>
   <c-customlwclookup object-name="Account" field-name="Name"
    parentidfield="AccountId"
    iconname="standard:account"
    parent-record-id = {value}
    onaccountselection = {handleAccountChange}
    class="childComponent">
   </c-customlwclookup>
</template>

lookupTemplate.js

   import { LightningElement } from 'lwc';

   export default class lookupTemplate extends LightningElement {
       handleAccountChange(event) {
           console.log('here !!!');
           var AccountId = event.detail.selectedRecordIdValue;
           console.log("AccountId ::: "+AccountId);
       }   
   }

My problem here is that, my custom lwc lookup component has an event which gets fired every time a lookup value is selected

    handleSelect(event) {
    var selectedVal = event.detail.selRec;
    this.selectedRecord =  selectedVal;

    const selectedEvent = new CustomEvent('accountselection', {
        detail : { selectedRecordIdValue : this.selectedRecord.Id}
    });
    this.dispatchEvent(selectedEvent);
} 

However, the handleAccountChange method is not getting called.

I am not sure why.

3
  • @Madurima Are you sure handleSelect has dispatched the event? Put a console at the end of handleSelect. – Sachin Hooda Jan 10 at 8:22
  • I did that already and it is coming up fine {"isTrusted":false,"composed":false,"detail":{"selectedRecordIdValue":"0016F00002cy7eXQAQ"},"type":"accountselection","target":null,"currentTarget":null,"eventPhase":0,"bubbles":false,"cancelable":false,"defaultPrevented":false,"timeStamp":55596.4849999873,"srcElement":null,"returnValue":true,"cancelBubble":false,"path":[],"NONE":0,"CAPTURING_PHASE":1,"AT_TARGET":2,"BUBBLING_PHASE":3} @SachinHooda – Madhurima Jan 10 at 8:24
  • I've updated my answer please have a look. – Sachin Hooda Jan 11 at 12:23
1

I believe CustomLightningDatatable is grand-parent of customlwclookup. Try dispatching the event with bubbles & composed property set to true,

    this.dispatchEvent(new CustomEvent('accountselection', {
        bubbles: true,
        composed: true,
        detail : { selectedRecordIdValue : this.selectedRecord.Id}
    }));

I saw you've attached the listener handler to lookupTemplate. It should be on CustomLightningDatatable

<c-custom-lightning-datatable key-field="textCol" columns={columns} data={tableData} wrap-text-max-lines="3" onaccountselection={handleSelection}>
    </c-custom-lightning-datatable>
2
  • I tried that. Still same issue @SachimHooda and its not actually grand parent component. – Madhurima Jan 10 at 9:01
  • 1
    That was exactly what it was. I though it was supposed to be on the imported html's js file. Thank you so much – Madhurima Jan 11 at 15:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.