[SalesForce] Unable to Populate Expanded Rows in LWC lightning-tree-grid

I have a Lightning Web Component with a lightning-tree-grid, and I want it to load with all rows expanded.

HTML (elements irrelevant to the question removed):

<template>
    <lightning-card>
            <div id="displayProfile" if:true={showProfile}>
                <lightning-tree-grid
                    id="profile-request-tree"
                    class="profile-request-tree"
                    hide-checkbox-column
                    key-field="Id"
                    data={profileRequestData}
                    onrowaction={handleNewChildRequest}
                    expanded-rows={profileRequestExpandRows}
                    columns={profileRequestColumns}>
                </lightning-tree-grid>
            </div>
            <div id="displayNewRequest" if:true={isNewRequest}>
                <c-request-header profile-id={profileId} experience-id={experienceId} onnewrequestdone={handleNewRequestDone}></c-request-header>
            </div>
    </lightning-card>
</template>

JS:

/* eslint-disable no-console */
import { LightningElement, api, track } from 'lwc';
import getExperiences from '@salesforce/apex/ConciergeAppController.getExperiences';

export default class ConciergeConsoleWithContainer extends LightningElement {
    @api recordId;
    @track isPopProfile = false;
    @track isNewRequest = false;
    @track showProfile = false;
    @track profileId;
    @track experienceId;
    @track isNewRequestDone;
    @track profileRequestData;
   @track profileRequestExpandRows = [];// = ['a0j54000001nbRBAAY', 'a0j54000001oUJCAA2'];
   @track currentExpandedRows;

    connectedCallback() {
        this.handleProfileFoundClick();
    }


    @track profileRequestColumns = [
        { label: 'Experience', fixedWidth: 500, fieldName: 'Name'},
        { label: 'Add', type: 'button-icon', fixedWidth: 20, typeAttributes: { 
            iconName: 'action:new_child_case', 
            variant: {fieldName: 'buttonVariant'},
            iconClass: {fieldName: 'showButton'}}},
        { label: 'Request Number', fixedWidth: 200, fieldName: 'CaseNumber'},
        { label: 'Subject', fixedWidth: 400, fieldName: 'Subject'},
        { label: 'Status', fixedWidth: 100, fieldName: 'Status'},
        { label: 'SLA', fieldName: 'Status'}
    ];


    updateProfileRequestListContainer(){
        var tempjson;
        var expando = [];

        getExperiences({ accountId : this.profileId})
            .then(data => {
                if(typeof data === 'undefined'){
                    console.log('no prior request');
                }
                else{
                    data.forEach(function (record){
                        expando.push(record.Id);
                        record.buttonVariant = 'border-filled';
                        record.Cases__r.forEach(function (req) {
                            req.showButton = 'slds-hide';
                            req.buttonVariant = 'bare';
                        })
                    })
                    this.profileRequestExpandRows.push(expando);
                    tempjson = JSON.parse(JSON.stringify(data).split('Cases__r').join('_children'));
                    this.profileRequestData = tempjson;
            }})
            .catch(error => {
                console.log('errors: ' + error);
            });
    }

    expandAllInTree() {
        const treegrid = this.template.querySelector('.profile-request-tree');
        if(treegrid != null) {
            treegrid.expandAll();
        }
    }

    handleNewRequestDone(){
        this.updateProfileRequestListContainer();
        this.isNewRequest = false;
        this.showProfile = true;
    }

    handleProfileFoundClick(){
        //to come from CTI system
        this.profileId = '0015400000G1PS5AAN'; //Alex
        this.isPopProfile = true;
        this.showProfile = true;
        this.updateProfileRequestListContainer();
        this.expandAllInTree();
    }

    handleNewExperienceClick(){
        this.parentRequestId = null;
        this.showProfile = false;
        this.isNewRequest = true;
    }

    handleNewChildRequest(event){
        //console.log('row: ' + JSON.stringify(event.detail.row));
        this.experienceId = event.detail.row.Id;
        this.showProfile = false;
        this.isNewRequest = true;
    }
}

If I hardcode the values of profileRequestExpandRows, those rows will load expanded. But if I dynamically populate those rows in the updateProfileRequestListContainer() method, nothing is expanded. I tried querying the tree grid element to expand the rows, both in the updateProfileRequestListContainer() method and separately in the expandAllInTree() method but the queryselector always returns null.

My guess is that this has something to do with the order of rendering, but I don't have much experience with HTML/JS. If anyone can provide any guidance on what I should research, I would really appreciate the help. I've been googling for hours and haven't found anything helpful.

Best Answer

I resolved it by replacing

this.profileRequestExpandRows.push(expando);
tempjson = JSON.parse(JSON.stringify(data).split('Cases__r').join('_children'));
this.profileRequestData = tempjson;

with

tempjson = JSON.parse(JSON.stringify(data).split('Cases__r').join('_children'));
this.profileRequestData = tempjson;
this.profileRequestExpandRows = expando;

The first version ended up creating an array within an array (it printed [["id1","id2"]] in the console), which the lwc couldn't use.

Related Solutions

[SalesForce] Preselect rows in lightning tree grid

Code Example seems to be not complete - as it is not really clear where the data comes from. But based on the existing lines i assume you are wiring the data to a property via an apex method.

You are defining the selectedRows at construction Time - getting Data from the Server is asynchronous which means it tries to match the key against empty data. As afterwards no changes occur nothing is selected. Expanded Rows works because its owned by the tree grid component and has functionality to keep the state in sync while the selected rows are just passed through to the data table component. So my assumption is that you should try to update the selectedRows attributes or just set it after the data is fetched initially (you have to wire to a function not a property)

To illustrate what i mean find the following updated playground: https://developer.salesforce.com/docs/component-library/tools/playground/xnsuAEs4I/2/edit

The first button does not work because the selectedRows Data is not mutated. The second button works because a mutation to the selectedRows happens

As Alternative you can also just add e.g. a rendering condition so that the tree grid is only loaded when the data is existing:

Same example: https://developer.salesforce.com/docs/component-library/tools/playground/xnsuAEs4I/3/edit

Now the first button is also working for the second table as at initialisation time the data is already there

[SalesForce] LWC Custom Tree grid issue

When I want to rebuild/extend some of the functionality for LWC I usually get styling from SLDS. You can check markup here for tree-grid.

Salesforce flattens data and uses aria-expanded, aria-level for styling. I would suggest the same. Here is the script to flatten data. I also updated playground with simple styling for Id

UPDATE: Created separate playground to not override changes.

UPDATE Added expand/hide.

Here is sample row markup with some code.

// rendered.js
let data = [
    { Name:'st1', Id:1, age:'2', num:'342222222', Email:'v@gmail.com' },
    { Name:'st1', age:'2', Id:2, num:'342222222', Email:'v@gmail.com', children:[
        { Name:'st1child', Id:6, age:'2', num:'342222222', Email:'v@gmail.com' },
        { Name:'st1child', Id:7, age:'2', num:'342222222', Email:'v@gmail.com' }, ]
    },
    { Name:'st1', age:'2', Id:3, num:'342222222', Email:'v@gmail.com' },
    { Name:'st1', age:'2', Id:4, num:'342222222', Email:'v@gmail.com' },
    { Name:'st1', age:'2', Id:5, num:'342222222', Email:'v@gmail.com' },
];
const isExpandedDefault = false;
const flatIt = (data, level) => data.reduce((acc, row) => [...acc, Object.assign(row, {
    level,
    expanded: isExpandedDefault,
}), ...flatIt(row.children || [], level + 1)], []);
data = flatIt(data, 1);

<!-- parent.html -->
<template>
   <table class="slds-tree">
       <thead>
           <th>Name</th>

           <th>Age</th>

           <th>Num</th>

           <th>Email</th>
       </thead>
       <tbody>
           <template for:each={datas} for:item="d">
                <c-child key={d.Id} data={d}></c-child>
           </template>
       </tbody>

   </table>
</template>

// Child.js
export default class Child extends LightningElement {
    @track _data;

    renderedCallback() {

    }

    @api
    set data(value) {
        this._data = value;
        this.ariaExpanded = false;
        this.ariaLevel = value.level;
    }

    get data() {
        return this._data;
    }
}

Best Answer

Related Solutions

[SalesForce] Preselect rows in lightning tree grid

[SalesForce] LWC Custom Tree grid issue

Related Topic