0

I have a table with checkbox column which will allow me check all/few rows as required on an LWC component. After selecting required rows user clicks a button and the page gets navigated to second LWC where I display the selected rows in another table. I am able to achieve till this part. Now, from second component user can navigate back and select some additional rows. The problem i'm facing here is, whenever i'm navigating back to first component, my checked rows are not retaining. It is presenting me a fresh table with all rows unchecked. Any way where I can still retain the checked rows even after moving back and forth.

My html table:

<table id="tableId" class="slds-table slds-table_bordered" aria-labelledby="element-with-table-label other-element-with-table-label">
                    <thead>
                        <tr class="slds-line-height_reset" style="position:sticky;z-index:1;top:0;left:0">
                            <th class="bgclr" scope="col" data-id="docname">
                                <div class="slds-truncate slds-text-align_left"><strong>Document Name</strong></div>
                            </th>
                            <th class="bgclr" scope="col" data-id="doctype">
                                <div class="slds-truncate slds-text-align_left"><strong>Document Type</strong></div>
                            </th>
                            <th class="bgclr" scope="col" data-id="action">
                                <div class="slds-truncate slds-text-align_left"><strong>Document Action</strong></div>
                            </th>
                            <th class="bgclr" scope="col" data-id="select">
                                <lightning-input onchange={handleAllSelected} type="checkbox"
                                        data-key="allCheckbox">
                                </lightning-input>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <template for:each={uploadedFiles} for:item="cmu">
                            <tr aria-selected="false" class="slds-hint-parent"
                                    id={cmu.docId} key={cmu.name}>
                                <td role="gridcell" class="slds-col">
                                    <div class="slds-truncate slds-text-align_left">{cmu.name}</div>
                                </td>
                                <td role="gridcell" class="slds-col">
                                    <div class="slds-truncate slds-text-align_left">{cmu.docType}</div>
                                </td>
                                <td role="gridcell" class="slds-col" style="width:25%;text-align:center;padding-right: 70px;">
                                    <lightning-formatted-url value={cmu.view} label="View" target="_blank">
                                     </lightning-formatted-url>
                                </td>
                                <td class="slds-col">
                                    <div class="slds-truncate slds-text-align_left">
                                        <lightning-input type="checkbox" value={cmu.name} data-id={cmu.docId}
                                            data-key="firstColumnCheckbox" onchange={handleCheckboxSelect}
                                            name={cmu.docId} checked={}>
                                        </lightning-input>
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>

js methods for selectAll and individual:

handleCheckboxSelect(event) {
        let selectedRows = this.template.querySelectorAll('lightning-input[data-key="firstColumnCheckbox"]');
        let allSelected = true;

        selectedRows.forEach(currentItem => {
            if (!currentItem.checked && currentItem.type === 'checkbox') {
                allSelected = false;
            }
        });

        let selectedRow = this.template.querySelector('lightning-input[data-key="allCheckbox"]');

        if (allSelected) {
            selectedRow.checked = true;
        } else {
            selectedRow.checked = false;
        }
        this.getAllSelectedRecord();
    }

handleAllSelected(event) {
        let selectedRows = this.template.querySelectorAll('lightning-input[data-key="firstColumnCheckbox"]');
       
        selectedRows.forEach(row => {
            if (row.type == 'checkbox') {
                row.checked = event.target.checked;
            }
        });
        this.getAllSelectedRecord();
    }

getAllSelectedRecord() {
        //first column checkbox selected records
        this.selectedCheckboxRows = [];
        let firstColumnCheckboxRows = this.template.querySelectorAll('lightning-input[data-key="firstColumnCheckbox"]');

        firstColumnCheckboxRows.forEach(row => {
            if (row.type == 'checkbox' && row.checked) {
                this.selectedCheckboxRows.push(row.dataset.id);
            }
        });

        console.log('multiple selected Record : ' + JSON.stringify(this.selectedCheckboxRows));
        if(!this.selectedCheckboxRows.length == 0){
            this.docChecked = false;
            this.isSecondChecked = true;
        }else if(this.selectedCheckboxRows.length == 0){
            this.docChecked = true;
            this.isSecondChecked = false;
        }
        this.callThirdStage();
    }

I'm trying to write a method in my connectedCallBack() and pass selected row Ids from second component to first component when navigating back and check the rows based on their IDs but not sure how to achieve it. Any suggestions on how to this can be done? I tried to write some sample code but this is not working.

    @api selectedRowIds; (Gets list of Ids from second component)
    isCheckedonLoad = false;

    connectedCallBack(){
       this.onLoadChecked();
    }
    
    onLoadChecked(){
    let firstColumnCheckboxRows = this.template.querySelectorAll('lightning-input[data-key="firstColumnCheckbox"]');

firstColumnCheckboxRows.forEach((row) => selectedRowIds.forEach(e2) => {
            if (row.dataset.id == e2) {
                this.isCheckedonLoad = true;
            }
        });
    
    }

1 Answer 1

1

You are trying to querying DOM before it rendering. connectedcallback call before the component rendered. You can check the LWC Life-cycle Hooks documents.

LWC Lifecycle Hooks

Also you can try:

When you are getting the data that time you can mark that records checkbox property true and use that property for checking the checkbox.

Here is the example

<template for:each={data} for:item="cmu">
    <span key={cmu.name}>
        <lightning-input type="checkbox" label={cmu.name} name="input2" checked={cmu.ischecked}></lightning-input>
    </span>
</template>
import { LightningElement } from 'lwc';

export default class BasicDatatable extends LightningElement {
    data = [];

    connectedCallback() {
        let data = [];
        for (let i = 0; i < 100; i++){
            data.push({
                name: `Name (${i})`,
                ischecked : (i%2 == 0)
            });
        }
        this.data = data;
    }
}

Output

Refs: https://lwc.dev/guide/introduction

3
  • I tried to set a variable true/false and set it when a row is clicked to true and pass it as attribute to html but everytime the component loads it gets set to false as i initially declared it a s false.
    – sfdcDev
    Commented Sep 17, 2023 at 15:19
  • It should be true when you want mark this as checked.
    – A.K.
    Commented Sep 17, 2023 at 15:21
  • @sfdcDev I added one example to show checkbox checked by default. I hope this will help you.
    – A.K.
    Commented Sep 17, 2023 at 15:44

You must log in to answer this question.

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