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