0

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>

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.