0

I need help in getting the values in the parent component from the template which is called in child. In below code, onchange event is giving me the Id for the picklist value but not the cell id. how can I achieve this?

Ask is: I want the key-field or the name along with the picklist value when it is selected?

Parent component

  <template if:true={zipcodeList}>
                    <div class="slds-m-right_none slds-m-top_none slds-align_absolute-center" style="overflow: visible;width: 1400px;">
                        
                        <c-custom-types style="width:614px;"
                                key-field="Id"
                                data={zipsList}
                                columns={columns}
                                onrowselection={getSelectedRowName}
                                onchange={handleChange}
                                show-row-number-column>
                        </c-custom-types >
                    </div>
                </template>

Parent.js

   connectedCallback() {   
        this.fetchMarkets().then(() => {
            this.arrOfZipcode = this.zipcodeswm.split(',');
            this.zipsList = this.getzipsList();
        });
       
    }
    
    getzipsList() {
        let arrOfZipcode = this.zipcodeswm.split(',');
        const transformedArray = arrOfZipcode.map(value => {
            return { Name: value, Id: value };
        });
        this.zipcodeList = transformedArray;
        const c = transformedArray.map(record => {
            return {
                ...record,
                'picklistOptions': this.LstOfMarkets
            };
        });
        return c;
    }
    fetchMarkets() {  
        return getMarkets().then((result) => {
            this.LstOfMarkets = Object.entries(result).map(([key, value]) => {
                return {
                    label: value,
                    value: key
                };
            });
        
            for (const key in result) {
                if (result.hasOwnProperty(key)) {
                    const value = result[key]; 
                    this.marketMap.set(key, value); // key=id and value= name
                }
            }
        }).catch((error) => {
            this.error = error;
            this.cases = undefined;
        });
    }



    // this is triggered when a row selected
    getSelectedRowName(event) {
       const conf = event.detail.config;
        const selectedRows = event.detail.selectedRows;
        
    }
   
    handleChange(event) {
        console.log('event.detail- handleCellChange', event.detail.value);
// HERE THIS EVENT HAS ONLY VALUE BUT THERE IS NO CELL INFO
    }

    ```
 customTypes LWC Component

customPicklist.html

    <div class="slds-m-right_none slds-m-top_none slds-align_absolute-center" style="overflow: visible;">
     <lightning-combobox
            name="picklist"
            label={typeAttributes.label}
            value={typeAttributes.value} -- ** how to get the value from here to parent for which row this value belong to**
            placeholder={typeAttributes.placeholder}
            options={typeAttributes.options}
            >
        </lightning-combobox>
    </div>
</template>

customTypes.html

<template></template>

customTypes.js

   import customPicklist from './customPicklist.html';
   export default class CustomTypes extends LightningDatatable {
    //global var
    static customTypes= {
        marketPicklist: {
            template: customPicklist,
            standardCellLayout: true,
            typeAttributes: ['label', 'placeholder', 'options', 'value', 'context', 'variant','name']
        }
    }

   }

enter image description here

enter image description here

0

1 Answer 1

0

In customPicklist.html, add a custom event when the combobox value changes

In customPicklist.js, dispatch the custom event.

In c-custom-types.html, handle the custom event onpicklistchange={handlePicklistChange}

In c-custom-types.js, handle the custom event.

handlePicklistChange(event) { const selectedValue = event.detail.value; // row logic } }

2
  • customPicklist.html is a template not LWC component
    – Neophyte
    Jan 18 at 4:04
  • how to add custom event to a template?
    – Neophyte
    Jan 18 at 18:33

You must log in to answer this question.

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