1

I have a LWC lightning datatable and I am giving the users two options to select rows. One is by clicking on checkbox at the start of the row and the other is when a user edits a cell of a row which should automatically select that particular row.

The selection of the row using the checkbox works as expected, but I am not able to select a row automatically when a cell is edited.

Here I have this array which I am using to populate the ids of the rows that needs to be selected. selectedRowsOnModal;

Here is my lightning-datatable html -

                    <lightning-datatable key-field="Id" data={vendorQuoteLineItemRecordsOnModal}
                        columns={recordsOnModal} resize-column-disabled
                        suppress-bottom-bar="true" selected-rows={selectedRowsOnModal}
                        onrowselection={handleDatatableRowSelectionOnModal}
                        oncellchange={handleItemQuantityCellUpdateOnModal}>
                    </lightning-datatable>

Below are the two methods I use for row selection and cell editing -

handleDatatableRowSelectionOnModal(event) {
    const selectedRows = event.detail.selectedRows;
    switch (event.detail.config.action) {
        case 'selectAllRows':
            console.log('selectAllRows');
            for (let i = 0; i < this.selectedRowsOnModal.length; i++) {

            }
            break;
        case 'deselectAllRows':
            console.log('deselectAllRows');

            break;
        case 'rowSelect':
            console.log('rowSelect');
            this.selectedRowsOnModal.push(selectedRows[0].Id);
            break;
        case 'rowDeselect':
            console.log('rowDeselect');
            break;
        default:
            break;
    }
}

handleItemQuantityCellUpdateOnModal(event) {
    const draftValues = event.detail.draftValues;
    this.selectedRowsOnModal.push(draftValues[0].Id);
    this.getVendorQuoteLineItemsByVendorQuoteId(this.vendorQuoteRecords[0].Id, 'modal');
}

I am also calling the get records method to rerender the datatable on the handleItemQuantityCellUpdateOnModal method.

1 Answer 1

0

To get the iniline edited rows, You can use this way:-

Here handleSave is a handler for onsave event.

async handleSave(event) {

    //event.detail.draftValues holds the object as list of records which are changed using inline editing
    const updatedFields = event.detail.draftValues;

    //here notifyChangeIds holds the ids which are changed
    const notifyChangeIds = updatedFields.map(row => { return { "recordId": row.Id } });
}

in html:-

<lightning-datatable
          key-field="Id"
          data={contacts.data}
          columns={columns}
          onsave={handleSave}
          draft-values={draftValues}
        >

Check the working example here:-

  1. Display Data in a Table with Inline Editing
  2. Enable Inline Editing for Lightning Table

Update

You can use selected-rows={preSelectedRows} attributes and populate it programmatically when cell is edited inline.

check this thread: LWC: Datatable - preselect rows programmatically

3
  • My actual issue is the checkbox of the row does not check automatically when an inline edit is done on that row.
    – Sumesh
    Commented May 4 at 2:09
  • @Sumesh check my updated answer Commented May 4 at 2:19
  • If you look at my code I am already doing this. Its the same link I used for reference. For some reason when I do inline edit that row does not select automatically
    – Sumesh
    Commented May 4 at 2:24

You must log in to answer this question.

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