0

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.

| improve this question | | | | |
  • Instead of push this.profileRequestExpandRows.push(expando); can you try this this.profileRequestExpandRows = [...this.profileRequestExpandRows ,expando ]; – Pranay Jaiswal Jun 14 '19 at 13:41
0

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.

| improve this answer | | | | |

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.