+ Start a Discussion
Vigneshwaran LoganathanVigneshwaran Loganathan 

Open Child Components in Same Section

I have a Component where I show list of Accounts using "lightning:verticalNavigation".. Now upon clicking one Account from this list, I would like to Open all its associated Contacts in same section.. How can I do that? 

User-added image
<aura:handler name="init" value="{!this}" action="{!c.doInit1}" />
 <aura:attribute name="items" type="Object"/>
 <aura:attribute name="items2" type="String" />

 <div class="slds-m-around_xx-small">  
        <lightning:layout>
            <lightning:layoutItem>
                <lightning:verticalNavigation selectedItem="{!v.selectedaccId}"
                                              onselect="{!c.onSelect}">
                    <lightning:verticalNavigationSection label="Select Account">
                        <aura:iteration items="{!v.items}" var="clnt" indexVar="index">
                            <lightning:verticalNavigationItemIcon label="{!clnt.Name}" 
                                                              name="{!clnt.Id}"
                                                              iconName="utility:open_folder"/>
                        </aura:iteration>
                    </lightning:verticalNavigationSection>
                </lightning:verticalNavigation>
            </lightning:layoutItem>          
        </lightning:layout>
</div>
 
doInit1: function (cmp, event, helper) {
        var action = cmp.get("c.getTreeData1");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set('v.items', response.getReturnValue());
            }
            
        });
        $A.enqueueAction(action);
    },


Thanks

Vignesh

ANUTEJANUTEJ (Salesforce Developers) 
Hi Vignweshwaran,

>> https://www.salesforcehut.com/2019/08/salesforce-lightning-tree-structure-for.html

The above link has an implementation of using lightning:tree which could be useful for your use case can you try checking this once?

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.
PriyaPriya (Salesforce Developers) 

Hi Vignehswaran,

Try using a lightning Tree grid inside  <lightning:verticalNavigationSection> iteration and assigned the grid data to the inner query of account.
e.g., data={clnt.contact}

kindly refer the below article on Lightning tree grid :-
https://developer.salesforce.com/docs/component-library/bundle/lightning-tree-grid/example 

If the above information helps, please mark it as best answer so that it may help others in future. 

Regards,

Priya Ranjan