0

I am implementing lightning-datatable with searching but, I am facing a issue:

When i searching a new data and selected 2 - 3 by checkbox, UI only displayed last checked row only. And all other got deselected.

In other words, I search Hindi and selected any record from, then i search English, then selection of Hindi got deselected.

Is there any way, to fix this my code is below

HTML

<template>
    <div class="slds-grid slds-wrap slds-m-left_xx-large">
        
        <div class="slds-col slds-size_2-of-3 slds-m-left_xx-large">
            <lightning-input class="slds-m-left_xx-large" type="search" label="Search Languages" placeholder="Filter Text" onchange={handleSearch}></lightning-input>
        </div>
        
        <div class="slds-col slds-size_2-of-3 slds-m-left_xx-large">
            <div class="slds-m-left_xx-large slds-scrollable_y" style="height:15rem;">
                <template if:true={data}>
                    
                    <lightning-datatable hide-table-header key-field="Id" data={data} columns={columns} 
                        onrowselection = {handleRowAction} selected-rows={listOfSelectedRecords}>
                    </lightning-datatable>
                </template>
                <template if:true={error}>
                    {error}>
                </template>
            </div>
        </div>
    </div>
</template>

JS

import { LightningElement, wire, track } from 'lwc';
import retrieveLocations from '@salesforce/apex/TypeAheadLWCController.retrieveLocations';
 
const columns = [
    { label: 'Name', fieldName: 'Name' },
];
 
export default class TypeAheadLWC extends LightningElement {
    data;
    error;
    columns = columns;
    searchString;
    initialRecords;
    listOfSelectedRecords = [];

    @wire(retrieveLocations)
    wiredAccount({ error, data }) {
        if (data) {
            console.log(data);
            this.data = data;
            this.initialRecords = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.data = undefined;
        }
    }
 
    handleSearch(event) 
    {
        const searchKey = event.target.value.toLowerCase();

        if (searchKey) 
        {
            this.data = this.initialRecords;
 
            if (this.data) 
            {
                let searchRecords = [];
 
                for (let record of this.data) 
                {
                    let valuesArray = Object.values(record);
 
                    for (let val of valuesArray) 
                    {
                        console.log('val is ' + val);
                        let strVal = String(val);
 
                        if (strVal && strVal.toLowerCase().includes(searchKey)) 
                        {
                            searchRecords.push(record);
                            break;
                        }
                    }
                }
                console.log('Matched Accounts are ' + JSON.stringify(searchRecords));
                this.data = searchRecords;
            }
        } 
        else 
        {
            this.data = this.initialRecords;
        }
    }

    handleRowAction(event) 
    {
        //alert('handleRowAction');
        var selectedRecords = this.template.querySelector("lightning-datatable").getSelectedRows();
        console.log('@@@ 1 HEY ' +JSON.stringify(selectedRecords));
        
        if (selectedRecords) 
        {
            for(var i=0; i<selectedRecords.length; i++)
            {
                if (!this.listOfSelectedRecords.includes(selectedRecords[i].Id)) 
                {
                    this.listOfSelectedRecords.push(selectedRecords[i].Id);
                }
            }
        }
        console.log('@@@ 2 ' + JSON.stringify(this.listOfSelectedRecords));
    }
}

I am querying Id and name from Apex.

2
  • Hi @Akshay, just wanted to ask a couple of questions to clarify your question. First of all, from reading your question it sounds like you're searching for records, selecting them from the table and then searching and selecting other records. Is that accurate? Secondly, have you attempted to store the selected records in a separate variable other than the listOfSelectedRecords? If the order in which you are doing the searching/selecting is accurate, I believe you will need to store the selected records elsewhere as you are essentially removing any reference to them when you search again. Feb 26, 2023 at 19:21
  • 1
    Yes @CallumMacErlich I have stored that in second list and it works fine thank you so much for your response. Feb 28, 2023 at 16:51

1 Answer 1

0

Adding my comment as an answer to help anyone else that might encounter this.

When searching for and selecting records, we need to store the selected records in a separate variable to prevent them being overwritten by the next search. This can be achieved by ensuring that the onrecordselect method pushes the selected records to that new variable.

One consideration with this approach is how you will handle de-selecting any values however, which becomes harder with the values being stored elsewhere.

You must log in to answer this question.

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