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>