LWC - How do we get Draft value of Custom Lookup in the Data Table?

Question

I'm currently trying to do a mass update of records through the Data Table that includes inline editing. As I understand it's not currently supported natively for Lookups in the Data Table. I attempted to do this from my end and sadly, there are very few examples of this online which is why I get lost easily.

My issue: I can't seem to capture the record in that lookup field for my draft values. How do I include it in the draft values so I can do an update of multiple rows?

Here are my codes:

JS

import { updateRecord } from 'lightning/uiRecordApi';
@track refreshTable = [];
@track oppLines = [];
@track draftValues = [];
@track columns = COLS;

const COLS = [
    {   // This is the column for the custom lookup
        label: 'Product', fieldName: 'ParentId', type: 'lookup', required: true,
        typeAttributes: {
            placeholder: 'Select Product',
            uniqueId: { fieldName: 'Id' }, //pass Id of current record to lookup for context
            object: "Product__c",
            icon: "standard:account",
            label: "Product",
            displayFields: "Name",
            displayFormat: "Name",
            filters: ""
        }
    },
    { label: 'Product Code', fieldName: 'Code', editable: false },
    { label: 'Product Description', fieldName: 'Description', editable: false },
    // ... more lines of code here ...
];

...

// This is the Save event
handleSave(event) {
    const recordInputs =  event.detail.draftValues.slice().map(draft => {
        const fields = Object.assign({}, draft);
        return { fields };
    });

    const promises = recordInputs.map(recordInput => updateRecord(recordInput));
    Promise.all(promises).then(contacts => {
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Success',
                message: 'Records updated',
                variant: 'success'
            })
    );
    // Clear all draft values
    this.draftValues = [];

    // Display fresh data in the datatable
    return refreshApex(this.refreshTable);
    }).catch(error => {
        // Handle error
    });
}

//listener handler to get the context and data
//updates datatable
handleSelection(event) {
    event.stopPropagation();
    let dataRecieved = event.detail.data;
    let updatedItem = { Id: dataRecieved.key, ParentId:  dataRecieved.selectedId };
    this.updateDraftValues(updatedItem);
    this.updateDataValues(updatedItem);
}

...

updateDataValues(updateItem) {
    let copyData = [... this.data];
    copyData.forEach(item => {
        if (item.Id === updateItem.Id) {
            for (let field in updateItem) {
                item[field] = updateItem[field];
            }
        }
    });

    //write changes back to original data
    this.data = [...copyData];
}

updateDraftValues(updateItem) {
    let draftValueChanged = false;
    let copyDraftValues = [...this.draftValues];
    //store changed value to do operations
    //on save. This will enable inline editing &
    //show standard cancel & save button
    copyDraftValues.forEach(item => {
        if (item.Id === updateItem.Id) {
            for (let field in updateItem) {
                item[field] = updateItem[field];
            }
            draftValueChanged = true;
        }
    });

    if (draftValueChanged) {
        this.draftValues = [...copyDraftValues];
    } else {
        this.draftValues = [...copyDraftValues, updateItem];
    }
}

HTML

<template>
    <lightning-card title="Edit Products" icon-name="standard:opportunity">
         <div class="slds-m-around_large" style="height: 400px;">
            <template if:true={oppLines}> 
                    <c-custom-data-table 
                        key-field="id"
                        data={oppLines}
                        columns={columns}
                        onsave={handleSave}
                        draft-values={draftValues}
                        onvalueselect={handleSelection}>
                    </c-custom-data-table>   
            </template>
            <template if:true={error}>
                <p>{oppLines.error}</p>
            </template>
        </div>
    </lightning-card>
    <div>
        {loadMoreStatus}
    </div>    
</template>

Any help is very much appreciated! If there are any more examples of LWC DataTable with Custom Lookup I could take a look into, please feel free to share. Thanks!

Answer 1

Well first thing you might want to show all your code because it seems like you may be missing something since this shouldn't work

for (let field in updateItem) {
            item[field] = updateItem[field];
        }

For example this, in your array you wont have any key called 'field' you'll have rating because here:

 let updatedItem = { Id: dataRecieved.key, ParentId:  dataRecieved.selectedId };

So unless i'm missing something you'll get a 'field is undefined' error.