5

I have use case where i need to show the values in the picklist format in lightning-datatable for which i am extending the lightning-datatable component.The datatable shows a drop-down box but i am not able to click it open to select the options in it.

enter image description here

I have even the value inside the combo box but it is just that i cannot open my combo-box to show the options. enter image description here

Below is my code to extend the lightning-datatable;

datatablePickList.html

<template>
    <div class="picklist-container">
        <lightning-combobox name="picklist" label={label} value={value} placeholder={placeholder} options={options}
            onchange={handleChange}></lightning-combobox>
    </div>
</template>

datatablePickList.js

import { LightningElement, api } from 'lwc';

export default class DatatablePickList extends LightningElement {

    @api label;
    @api placeholder;
    @api options;
    @api value;
    @api context;

    connectedCallback(){
        console.log("Options is "+JSON.stringify(this.options));
        console.log("Value is "+JSON.stringify(this.value));
    }

    handleChange(event) {
        //show the selected value on UI
        this.value = event.detail.value;

        //fire event to send context and selected value to the data table
        this.dispatchEvent(new CustomEvent('picklistchanged', {
            composed: true,
            bubbles: true,
            cancelable: true,
            detail: {
                data: { context: this.context, value: this.value }
            }
        }));
    }


}

extendedLightningDatatable.js

import LightningDatatable from 'lightning/datatable';
import customRichtextControl from './customRichtextControl.html';
import deleteRow from './deleteRow.html';
import DatatablePicklistTemplate from "./picklist-template.html";

export default class ExtendedLightningDatatable extends LightningDatatable {
    static customTypes = {
        customRichtext: {
            template: customRichtextControl,
            standardCellLayout: false
        },  
        picklist: {
            template: DatatablePicklistTemplate,
            typeAttributes: ['label', 'placeholder', 'options', 'value'],
        },
    };
}

Component that uses the extendedLightningDatatable(template):

<template>
        <div style="height: auto;">
            <lightning-button label="+Add" onclick={addTableRow}></lightning-button>
            <c-extended-lightning-datatable 
                key-field="Id" 
                data={records} 
                columns={columns}
                onrowaction={handleRowAction} 
                onpicklistchanged={picklistChanged} 
                onvalueselect={handleSelection}
                oncellchange={handleCellChange}
                hide-checkbox-column="false"
                show-row-number-column="true"
                onsort={updateColumnSorting}
                sorted-by={sortBy}
                sorted-direction={sortDirection}
                row-number-offset ="0" 
                draft-values={draftValues}
                onsave={handleSave}
                >
            </c-extended-lightning-datatable>
        </div>
        <footer if:true={isLimitSet} class="slds-card__footer">
            <a href="javascript:void(0);">
                <span class="slds-align_absolute-center" onclick={handleViewAll}>View All</span>
            </a>
        </footer>
</template>

ExtendedLightningDatatable.html

<template>
    
</template>

Component that uses extendedLightningDatatable(LightningRelatedListDetail.html)

<template>
        <div style="height: 100%;">
            <lightning-button label="+Add" onclick={addTableRow}></lightning-button>
            <c-extended-lightning-datatable 
                key-field="Id" 
                data={records} 
                columns={columns}
                onrowaction={handleRowAction} 
                onpicklistchanged={picklistChanged} 
                onvalueselect={handleSelection}
                oncellchange={handleCellChange}
                hide-checkbox-column="false"
                show-row-number-column="true"
                onsort={updateColumnSorting}
                sorted-by={sortBy}
                sorted-direction={sortDirection}
                row-number-offset ="0" 
                draft-values={draftValues}
                onsave={handleSave}
                >
            </c-extended-lightning-datatable>
        </div>
        <footer if:true={isLimitSet} class="slds-card__footer">
            <a href="javascript:void(0);">
                <span class="slds-align_absolute-center" onclick={handleViewAll}>View All</span>
            </a>
        </footer>
</template>

LightningRelatedListHeader.html

<template>
<template if:true={isShowRelatedList}>
        <lightning-card>
            <article class="slds-card slds-card_boundary headerBottomBorder forceRelatedListCardDesktop">
                <div class="slds-grid slds-page-header forceRelatedListCardHeader">
                    <header class="slds-media slds-media_center slds-has-flexi-truncate">
                        <div class="slds-media__figure">
                            <lightning-icon icon-name={objectIconName} size="small">
                            </lightning-icon>
                        </div>
                        <div class="slds-media__body">
                            <h2 class="slds-card__header-title">
                                <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title={objectPluralLabel}>
                                    <span>{objectPluralLabel} {recordCount}</span>
                                </a>
                            </h2>
                        </div>
                        <div class="slds-no-flex">
                            <lightning-button-icon variant="border-filled" icon-name="utility:refresh" alternative-text="Refresh" title="Refresh" onclick={handleRefresh}>
                            </lightning-button-icon>
                            <template if:false={isNewDisabled}>   
                                    <lightning-button
                                        label="New"
                                        onclick={createNewRecord}>
                                    </lightning-button>
                                </template>
                        </div>
                    </header>
                </div>
                
                <div>
                    <c-lightning-related-list-detail child-object-api-name={childObjectApiName} 
                                                     field-set-api-name={fieldSetApiName}   
                                                    child-object-fields={childObjectFields} child-object-richtext-fields={childObjectrRichtextFields}   
                                                    parent-field-api-name={parentFieldAPIName}
                                                    parent-record-id={recordId} 
                                                    records-filter-logic={relatedListRecordsFilterLogic} 
                                                    is-edit-disabled={isEditDisabled} 
                                                    is-delete-disabled={isDeleteDisabled}
                                                    no-of-initial-records-load={noOfInitialRecordsLoad}
                                                    record-name={recordName}
                                                   >

                    </c-lightning-related-list-detail>
                </div>
        </article>
    </lightning-card>

        <!-- create Record Component-->
        <template if:true={createRecordOpen}>
            
            <template if:true={recordTypeSelector}>
                <div >
                    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                        <div class="slds-modal__container">
                            <header class="slds-modal__header">
                                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
                                    <lightning-button-icon icon-name="utility:close" variant="bare-inverse" size="large" onclick={closeModal}></lightning-button-icon>
                                    <span class="slds-assistive-text">Close</span>
                                </button>
                                <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">New {objLabelName}</h2>
                            </header>
                            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                                <div class="slds-radio_faux slds-radio__label">
                                <lightning-radio-group name="Record Type"
                                                    label="Record Type"
                                                    value={recordTypeId}
                                                    options={recordTypeOptions}
                                                    variant="label-inline"
                                                    type="radio"
                                                    onchange={handleRecTypeChange}>
                                </lightning-radio-group>
                                </div>
                            </div>
                            <footer class="slds-modal__footer">
                                <lightning-button label="Cancel" onclick={closeModal}></lightning-button>
                                <lightning-button label="Next" onclick={createRecordMain} variant="brand"></lightning-button>
                            </footer>
                        </div>
                    </section>
                    <div class="slds-backdrop slds-backdrop_open"></div>
                </div>
            </template>
            
            <template if:true={mainRecord}>
                    <div>
                        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                            <div class="slds-modal__container">
                                <header class="slds-modal__header">
                                    <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
                                        <lightning-button-icon icon-name="utility:close" variant="bare-inverse" size="large" onclick={closeModal}></lightning-button-icon>
                                        <span class="slds-assistive-text">Close</span>
                                    </button>
                                    <h2 id="modal-heading-02" class="slds-text-heading_medium slds-hyphenate">New {recordName}</h2>
                                </header>
                                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-2">
                                        <lightning-record-form
                                         class="recordForm"
                                            object-api-name={childObjectApiName}
                                            record-type-id={recordTypeId}
                                            layout-type="Compact"
                                            columns="2"
                                            density="comfy"
                                            onerror={handleError}
                                            onsuccess={handleSuccess}
                                            oncancel={closeModal}
                                            onsubmit={handleSubmit}>
                                        </lightning-record-form>  
                                </div>
                            </div>
                        </section>
                        <div class="slds-backdrop slds-backdrop_open"></div>
                    </div>
            </template>
        </template>
   </template>
</template>

Let me know how to solve this issue.

3
  • Are you able to post the code for extendedLightningDatatable.html & the JS file of the component that consumes extendedLightningDatatable? Looking into your posted code at a high level, there doesn't seems to be any noticeable error.
    – arut
    Commented Dec 27, 2020 at 16:48
  • @arut Here is that code i have added below. Also i found out that in the debug console, the <td></td> element which encloses my <datatable-picklist> has a div with class = "slds-truncate". Once i remove that class, i can able to open the picklist but in code i have nowhere written this class. Can you help me how to remove it?
    – Mukesh
    Commented Dec 28, 2020 at 5:11
  • you have posted the code that was already present in your question. Not the code I had asked for.
    – arut
    Commented Dec 28, 2020 at 5:16

2 Answers 2

14

Try applying wrapText: true to your required column detail. The picklist values are getting clipped automatically, Setting wrapText will allow opening the picklist popup.

const exampleColumns = [
    { label: 'Description', fieldName: 'description', type: 'text', wrapText: true }
];

Let me know how it goes, I have faced a similar issue and got resolved after applying the above changes.

5
  • 2
    The wrapText property works great as you said. Now the issue is solved!!
    – Mukesh
    Commented Dec 28, 2020 at 5:54
  • 1
    Thanks for the confirmation. I'm glad I could be of help. Commented Dec 28, 2020 at 6:09
  • 1
    If this answer helped you, please mark it accepted so @Akshay can get some deserved reputation points. :-) Commented Dec 28, 2020 at 19:31
  • Thanks, @MatthewSouther, Appreciate your gesture. :) Commented Dec 29, 2020 at 5:53
  • nice solution, thanks! Commented Sep 24, 2021 at 6:51
0

Can you share with me the js file that has the picklist values. I am not able to retrieve it from my custom metadata.

1
  • Welcome to Salesforce Stack Exchange (SFSE!) This is a Questions & Answers site, not a threaded forum. Please see the note about "commentary on the question or other answers" in Why and how are some answers deleted?, and be aware that this "answer" will most likely be deleted. Please contribute to SFSE in other ways so that you gain reputation - you only need 15 rep to upvote a question & only 50 to comment under someone else's question.
    – Moonpie
    Commented Sep 13, 2022 at 3:07

You must log in to answer this question.

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