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. Commented Jan 10, 2021 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
    Commented Jan 10, 2021 at 8:24
  • I've updated my answer please have a look. Commented Jan 11, 2021 at 12:23

1 Answer 1

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
    Commented Jan 10, 2021 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
    Commented Jan 11, 2021 at 15:04

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .