2

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 Dec 27 '20 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 Dec 28 '20 at 5:11
  • you have posted the code that was already present in your question. Not the code I had asked for. – arut Dec 28 '20 at 5:16
3

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.

4
  • The wrapText property works great as you said. Now the issue is solved!! – Mukesh Dec 28 '20 at 5:54
  • Thanks for the confirmation. I'm glad I could be of help. – Akshay Poddar Dec 28 '20 at 6:09
  • If this answer helped you, please mark it accepted so @Akshay can get some deserved reputation points. :-) – Matthew Souther Dec 28 '20 at 19:31
  • Thanks, @MatthewSouther, Appreciate your gesture. :) – Akshay Poddar Dec 29 '20 at 5:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.