Expand all rows of LWC tree-grid with asynchronous loading

Question

I'm having trouble figuring out how to create a button to expand all rows with my current setup. The child rows are only loaded when the parent is toggled. Is there a way to retrieve them all at once and expand the rows? Here's a stripped-down version of what I have so far-

Apex:

public with sharing class ihIntHireLogController {
    @AuraEnabled(cacheable=true)
        public static List<Internal_Requirement__c> getReqs() {
            List<Internal_Requirement__c> response = new List<Internal_Requirement__c>();
            String query = 'SELECT Name, Id FROM Internal_Requirement__c WHERE Status__c = \'Open\' ';
            response = Database.query( query );
            return response;
        }

        @AuraEnabled
        public static List<Internal_Candidate_Submission__c> getSubs(Id parentId) {
            return [
                SELECT Name, Id, Full_Name__c
                FROM Internal_Candidate_Submission__c
                WHERE Internal_Requirement__c = :parentId
            ];
        }
}

JS:

import { LightningElement, wire} from "lwc";
import getReqs from "@salesforce/apex/ihIntHireLogController.getReqs";
import getSubs from "@salesforce/apex/ihIntHireLogController.getSubs";
// Global Constants
const COLS = [
    
    {
        label: 'Requirement',
        fieldName: 'RecordURL',
        type: 'url',
        initialWidth: 300,
        typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}
    },
    { fieldName: "FullName", label: "Full Name" },
];

export default class IhBoard extends LightningElement {
    wiredActivities;
    gridColumns = COLS;
    gridData = [];
   
    
    @wire(getReqs, {})
    parentAccounts(value) {
        this.wiredActivities = value;
        const { data, error } = value;
        if (data) {
            this.gridData = data.map((account) => ({
                _children: [],
                ...account,
                RecordURL:'/'+account.Id,

            }));
            this.isLoading = false;
            console.log('gridData', this.gridData);
        }
        else if (error){
            console.log("error loading requirements", error);
        } 
        
    }
    clickToExpandAll() {
        const grid =  this.template.querySelector('lightning-tree-grid');
        grid.expandAll();
    }

    handleOnToggle(event) {
        const rowName = event.detail.name;
        if (!event.detail.hasChildrenContent && event.detail.isExpanded) {
            getSubs({ parentId: rowName })
                .then((result) => {
                    if (result && result.length > 0) {
                        const newChildren = result.map((child) => ({
                            _children: [],
                            ...child,
                            ParentAccountName:child.Parent?.Name,
                            RecordURL: '/'+child.Id,
                            FullName: child.Full_Name__c,

                        }));
                        this.gridData = this.getNewDataWithChildren(
                            rowName,
                            this.gridData,
                            newChildren
                        );
                    } else {
                        //error
                    }
                })
                .catch((error) => {
                    // catch
                });
        }
    }

    getNewDataWithChildren(rowName, data, children) {
        return data.map((row) => {
            let hasChildrenContent = false;
            if (
                Object.prototype.hasOwnProperty.call(row, "_children") &&
                Array.isArray(row._children) &&
                row._children.length > 0
            ) {
                hasChildrenContent = true;
            }

            if (row.Id === rowName) {
                row._children = children;
            } else if (hasChildrenContent) {
                this.getNewDataWithChildren(rowName, row._children, children);
            }
            return row;
        });
    }
}

HTML:

<template>
    <lightning-button label="Expand All" onclick={clickToExpandAll}></lightning-button>
    <lightning-tree-grid
        columns={gridColumns}
        data={gridData}
        is-loading={isLoading}
        key-field="Id"
        ontoggle={handleOnToggle}
    ></lightning-tree-grid>
</template>

Answer 1

I've done this before for accordion sections - maybe this will help: How to add an "expand all" button to lightning-accordion lwc?