0

Between this salesforce guidance and inspiration from this popular playground lwc I've arrived at my near working solution.

This screenshot kinda says it all. When I was on row 1, I already clicked the pencil icon and selected an option from my lightning-combobox.. and notice the yellow highlight: good, however when the editTemplate pop-up exited, the default template remains blank: bad

Before taking the screenshot, I clicked the pencil icon on row 2 so you could see again what the editTemplate looks like in action:

lightning-datatable with custom dropdown

The field is correctly highlighted in yellow by the lighting-datatable component - it properly recognizes my interaction with the custom editTemplate that I designed. And if I save my data, the draftValues have been properly updated so the correct changed-data will be submitted. But, why can't I get the editValue to populate back to the default non-interactive template

screenshot of rossDataTable.js

picklist-template-edit.html (works just like I want)

<template>
    <c-ross-datatable-picklist 
        data-inputable="true"
        fieldname={columnLabel} 
        value={editedValue}
        placeholder={typeAttributes.placeholder} 
        options={typeAttributes.options} 
        context={typeAttributes.context}>
    </c-ross-datatable-picklist>
</template>

picklist-template.html (this is my conundrum. how to make it show edited value?)

<template>
    <p>{typeAttributes.value}</p>
</template> 
2
  • Would you be able to share the contents of c-ross-datatable-picklist? am trying to do the same and somehow when I change values in combobox they're not updating :(
    – zaitsman
    Commented Jun 7 at 1:57
  • I got mine from here. Just click on the "components" tab, and see the datatablePicklist.html they have there
    – bkwdesign
    Commented Jun 7 at 13:23

2 Answers 2

2

I figured it out.

My picklist-template.html should be like this:

<template>
    <p>{value}</p>
</template>
0

To show correctly the value in picklist-template.html I use a custom combobox. Because other approach doesn't work properly if Label and API in the origin picklist don't have the same value. So, it looks like:

    <template>
      <c-combobox-to-readonly 
        value={value}        
        options={typeAttributes.options}       
        >
      </c-combobox-to-readonly>  
    </template>

My custom combobox is called comboboxToReadonly:

comboboxToReadonly.html

<template>
    <lightning-combobox
        name="combobox hidden"
        value={value}
        options={options}
        class="hidden-combobox">
    </lightning-combobox>

    <span class="slds-truncate">{selectedLabel}</span>
</template>

comboboxToReadonly.js

import { LightningElement, api } from 'lwc';

export default class ComboboxToReadonly extends LightningElement {

    @api options;
    @api value;

    
    get selectedLabel(){
        const selectedOption = this.options.find(opt => opt.value === this.value);
        return selectedOption ? selectedOption.label : '';
    }
}

comboboxToReadonly.css

.hidden-combobox {
    display: none;
}

.readonly-input input {
    border: none;
    pointer-events: none;
}

.readonly-input .slds-input {
    border: none;
    background-color: transparent;
}

I hope it helps!

New contributor
Alejandra Rocha is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
1
  • I am wondering if a read-only version of the field needs to be displayed as a combobox at all. wouldn't you just use a simpler component. I am probably missing something here entirely. does this show multiple-selections greyed-out or something?
    – bkwdesign
    Commented 1 hour ago

You must log in to answer this question.

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