lwc select-rows attribute wont update for tree grid?

Question

I am trying to automatically select(checkbox) the nested rows when selecting the parent row in a lightning-tree-grid.

It's my understanding that the selected-rows attribute on the lightning-tree-grid might be able to do this. I can't figure out if what I am doing is wrong, or I am not giving it what it needs to work. Ive included screenshots of 'most' of the code to help. I did find other supporting links that are related to my issue but I still cant get it to work.

lwc wire issue with select-rows

Selecte Children automatically when Select Parent

HTML

<div class="spinnerHolder">
        <template if:true={isLoading}>
            <lightning-spinner alternative-text="loading"></lightning-spinner>
        </template>
        <lightning-tree-grid
            lwc:if={treeGridData.length}
            class="results"
            data-id="gridResult"
            columns={gridColumns}
            data={treeGridData}
            key-field="contactName"
            expanded-rows={expandedList}
            selected-rows={selectedData}
            onrowselection={selectRowHandler}
        >
        </lightning-tree-grid>
    </div>

JS

@track selectedData = [];

    selectRowHandler(event) {
        let temp = [];
        for (let i = 0; i < event.detail.selectedRows.length; i++) {
            temp.push(event.detail.selectedRows[i]);
        }
        this.selectedData = temp;
        console.log('selected Data', this.selectedData);
    }


//probably dont need to show ALL of this but..
@wire(getResults, { filterString: '$bindFilters' })
    contactsResult({ error, data }) {
        this.gridisLoading = true;
        this.contactsCount = 0;
        this.offset = 0;
        console.log(data);
        if (data) {
            const rawData = data;
            this.contactsCount = rawData.length;
            if (this.contactsCount === 0) {
                this.gridisLoading = false;
                this.activateSearch();
            } else {
                try {
                    this.initialData = dataHelper.transformDataObject(rawData);
                    this.downloadData = downloader.createCsvContent(rawData);
                    // console.log(this.downloadData);
                    if (this.missingPersons.length > 0) {
                        this.initialData = dataHelper.filterForMissingPerson(this.initialData, this.missingPersons);
                        this.downloadData = downloader.filterForMissingPersonDownload(this.downloadData, this.missingPersons);
                    }

                    this.sliceData();
                } catch (e) {
                    this.handleError(e);
                } finally {
                    this.gridisLoading = false;
                    this.activateSearch();
                }
            }
        } else if (error) {
            this.handleError(error);
        }
        this.gridisLoading = false;
        this.activateSearch();
    }

lache · Accepted Answer · 2024-11-26 01:18:26Z

0

It ended up being my understanding of @track vs @api. @api exposes the variable and @track well, tracks changes. However every time $bindfilters changed it was clearing selectedData also, which didn't help. So a combination of my misunderstanding basically.

answered Nov 26, 2024 at 1:18

lache

8503 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

lwc select-rows attribute wont update for tree grid?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related