0

I have a combobox in a column of a custom table that is populated dynamically. How can I set the value selected for the row that the combobox was changed? Currently, when the onchange fires, the selected value is set for every row that is output in the table. I can get the row index of the table and output the key/value and I can get the selected value of the combobox, but I can't figure out how I need to set the value for each row individually.

HTML:

            <template for:each={products} for:item="product" for:index="indexParent">
                <tr key={product.key}>
                    <td><lightning-input type="checkbox" name="input1"></lightning-input></td>
                    <td>
                        {product.value}
                    </td>
                    <td>
                        <lightning-combobox
                            name="progress"
                            value={status}
                            placeholder="--Please Select--"
                            options={statuses}
                            onchange={handleStatusChange}                                     
                            data-index={indexParent} >
                        </lightning-combobox> 
                    </td>
                </tr>
            </template>

JS:

import { LightningElement, api, wire, track } from 'lwc';
import getProducts from '@salesforce/apex/TestController.getProducts';

export default class TestLWC extends LightningElement {

    status = '';
    @track products = [];
    
    @wire(getProducts)
    wireProductData(result) {
        if(result.data) {
            var conts = result.data;
            for(var key in conts) {
                this.products.push({value:conts[key], key:key })
            }
        }
    }
    
    get statuses() {
        return [
            { label: 'Contracted', value: 'Blue' },
            { label: 'In Progress', value: 'Yellow' },
            { label: 'Live', value: 'Green' },
        ];
    }
    
    handleStatusChange(e) {
        // get the current top level row index of the data table
        const itemIndex = e.currentTarget.dataset.index;
        console.log('************************* itemIndex ' + itemIndex);

        // get row and output the value and key
        const rowData = this.products[itemIndex];
        console.log('************************** rowData value' + rowData.value);
        console.log('************************** rowData key' + rowData.key);

        // get the value selected from the combobox
        console.log('************************* value ' + e.target.value);
        this.status = e.target.value;
    }
}
1
  • 2
    each row needs its own status value, so you'll need to update your 'products' variable to keep track of the status value for each row
    – Nick C
    Feb 18 at 2:39

1 Answer 1

1

Three changes in your code can fix the problem:-

First, modify the products array to have more attributes in each item. We have added one more attribute i.e. picklistValue

@wire(getProducts)
wireProductData(result) {
    if(result.data) {
        var conts = result.data;
        for(var key in conts) {
            this.products.push({
                 value:conts[key], 
                 key:key,
                 picklistValue: '' 
            })
        }
    }
}

now, In change handler of combobox, you can assign the picklist value to only changed row:-

handleStatusChange(e) {
    this.products =  JSON.parse(JSON.stringify(this.products));
    // get the current top level row index of the data table
    const itemIndex = e.currentTarget.dataset.index;
    this.products[itemIndex].picklistValue = e.target.value;
}

and finally modify your html code by assigning value dynamically from array list to your combobix:-

        <template for:each={products} for:item="product" for:index="indexParent">
            <tr key={product.key}>                    
                <td>
                    <lightning-combobox
                        name="progress"
                        value={product.picklistValue}
                        placeholder="--Please Select--"
                        options={statuses}
                        onchange={handleStatusChange}                                     
                        data-index={indexParent} >
                    </lightning-combobox> 
                </td>
            </tr>
        </template>
1
  • Thank you to you both! Feb 18 at 18:53

You must log in to answer this question.

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