[SalesForce] Lightning datatable checkbox remains checked after multi delete in LWC

In my LWC, I have multi-delete functionality. I need to check the records using checkbox and press the delete button to delete. After deleting a record, the next record automatically gets checked. Ideally, all checkboxes should remain unchecked after delete is completed.

EG: Please find the screenshot below. Out of 3 records, I deleted 1st record and after it was deleted, the checkbox remained checked for the 2nd record.

How can I clear the checkbox after deletion? I checked here. It's working fine for aura but not for LWC. Is it a salesforce issue? Please guide. Thank you!

Datatable code.

<div class="slds-table_bordered slds-table_striped slds-scrollable slds-m-around_medium">
            <lightning-datatable key-field="id" data={addresses} columns={columns} onrowaction={handleRowActions}>
            </lightning-datatable>
</div>

Delete button code.

deleteAdd(currentRow) {
        let selected = this.template.querySelector('lightning-datatable').getSelectedRows();//get selected records
        let CRIdArray = [];//add all relationship IDs in array 
        selected.forEach(row => {
            if (row.Role!=='Account') {
                CRIdArray.push(row.CRId);
            }
        });
            deleteAddress({deleteIds: CRIdArray})//delete address using apex
            .then(result => {
                // refreshing table data using refresh apex
                return refreshApex(this.refreshTable);
            })
            .catch(error => { //Showing error if any
                //catch errors
            });
}

Best Answer

As it stands now, I'm pretty sure you're "recycling" the id field, which is causing the odd behavior you're seeing. Each row in the table should have a unique ID (such as the Salesforce ID), and should not be generated in a way that an unrelated row should match an ID of a previously selected row. The key field is used to determine if a row is a different row than a previous render, so if you're recycling ID values, this is the behavior you get.

You should apparently be using CRId as your key field:

<lightning-datatable key-field="CRId" data={addresses} columns={columns} onrowaction={handleRowActions}>

Side note:

In JavaScript, it's customary to use the appropriate Array method instead of this awkward forEach-push loop. In your case:

let CRIdArray = selected.map(row => row.CRId);

Related Solutions

[SalesForce] How to get selected row number from lightning-datatable in Salesforce LWC

You can not get the row numbers but you can get the selected rows. You can use getSelectedRows() method. Based on the selected rows you can find the selected records from the list of all records.

let rows = this.template.querySelector('lightning-datatable').getSelectedRows();

Or you can use the onrowselection event handler to get the selected rows.

HTML

<template>
    <lightning-datatable
            data={data}
            columns={columns}
            key-field="id"
            onrowselection={getSelectedName}>
    </lightning-datatable>
</template>

getSelectedName(event) {
    const selectedRows = event.detail.selectedRows;
    // Display that fieldName of the selected rows
    for (let i = 0; i < selectedRows.length; i++){
        console.log("You selected: " + selectedRows[i].opportunityName);
    }
}

Documentation for Lwc datatable.

[SalesForce] Clear selectedRows after deleting records in lightning-datatable

EDIT: As you already have an attribute named selectedRows, you need to use a new attribute something else, like setSelectedRows you need to use two different attributes to store the selected rows and to reset the selected.

Create one attribute for the selected rows and assign it to [] an empty array, whenever you want to unselect the selected rows.

<lightning-datatable 
    data={developments}
    columns={columns}
    key-field="id"
    onrowaction={handleRowAction}
    onrowselection={getSelectedRows}
    selected-rows={setSelectedRows}
></lightning-datatable>

You will need a reactive property for this.

selectedRows = [];

...

bulkDeleteItems(itemIds) {
    if (itemIds.length == 0) {
        this.showToast(
            'No items to delete',
            'Please select items from the list in order to be removed',
            'error'
        );
        return;
    }

    deleteAreaItems({
        areaItemsId: itemIds
    }).then(() => {
        this.showToast(
            'Area Items Deleted Succesfully',
            'All items deleted succesfully',
            'success'
        );
        this.refreshItems();
        this.setSelectedRows = []; /// empty selection.
    }).catch(error => {
        this.showToast('Something went wrong', error.body.message, 'error');
        return;
    });
}

Best Answer

Related Solutions

[SalesForce] How to get selected row number from lightning-datatable in Salesforce LWC

[SalesForce] Clear selectedRows after deleting records in lightning-datatable

Related Topic