function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
DesaiDesai 

Lightning:TreeGrid

Hi ,

We have a requirement to Display Accounts, Contacts( of account), Opportunities(of contact) to be displayed in a tree hierarchy using lightning component.
 I am not able to customize the code from below link https://developer.salesforce.com/docs/component-library/bundle/lightning:treeGrid/documentation 
This does show account and its contacts in tree hierarchy but
1) it doesnt show up the field names of contact
2) how to display contacts opportunity under each contact.

Regards,
Desai
Khan AnasKhan Anas (Salesforce Developers) 
Hi Desai,

Greetings to you!

Please refer to the below blog which has sample code which might help you with the above requirement. Kindly try to implement according to your requirement.

https://rajvakati.com/2018/04/15/usage-of-lightningtreegrid/

I hope it helps you.

Kindly 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. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
DesaiDesai
Hi Khan,

Thanks for link.
Please be patient with me as i am new to lightning. The above like doesn't show the field names for contacts and opportunities. Is it even possible ?
Regards,
Desai
Ramesh DRamesh D
Hi Desai,
Try below code, i use this in my org
Component:
<aura:handler name="init" value="{!this}" action="{!c.init}" />
    <aura:attribute name="gridColumns" type="List" access="PRIVATE" />
    <aura:attribute name="gridData" type="Object" access="PRIVATE" />
    <aura:attribute name="gridExpandedRows" type="List" access="PRIVATE" />   
    
    <div>
        <lightning:treeGrid
                            columns="{! v.gridColumns }"
                            data="{! v.gridData }"
                            expandedRows="{! v.gridExpandedRows }"
                            keyField="name"
                            />
    </div>
JS:
//Controller
({
    init : function(component, event, helper) {
        
        component.set('v.gridColumns', [
            {label: 'name', fieldName: 'name', type: 'text'},
            {label: 'Phone', fieldName: 'label', type: 'text'},
        ]);
            helper.getData(component);
            
         }
  });

//Helper

({
	getData : function (cmp) {
        var action = cmp.get("c.getTreeGridData");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var data = response.getReturnValue();
                var temojson = JSON.parse(JSON.stringify(data).split('items').join('_children'));
                console.log(temojson);
                cmp.set('v.gridData', JSON.parse(temojson));
            }
            // error handling when state is "INCOMPLETE" or "ERROR"
        });
        $A.enqueueAction(action);
    }
})

Apex Controller:
@AuraEnabled
    public static String getTreeGridData(){
        List<Account> accs = [Select Id , Name,Phone,(Select Id , Name,Phone from Contacts) from Account];
        Map<Id , Contact> opps =new Map<Id , Contact>( [Select Id , Name,Phone,(Select Id ,Name From Opportunities) from Contact]);
        
        List<AccountWrapper> aooo = new List<AccountWrapper>();
        for(Account a : accs){
            AccountWrapper aWraper = new AccountWrapper() ; 
            aWraper.name =a.Name ;
            aWraper.label =a.Phone ;
            List<Items> co = new List<Items>();
            for(Contact c : a.Contacts){
                Items conWrapp = new Items();
                conWrapp.name =c.Name ;
                conWrapp.label =c.Phone ;
                
                List<Items> wrapperOooo = new List<Items>();
                for(Opportunity o : opps.get(c.Id).Opportunities){
                    Items ooo = new Items(); 
                    ooo.name = o.Name ;
                    ooo.label = o.Name ;
                    wrapperOooo.add(ooo);
                }
                
                conWrapp.items =wrapperOooo ;
                co.add(conWrapp);
            }
            aWraper.items = co;
            aooo.add(aWraper);
            
        }
        return JSON.serializePretty(aooo) ;
    } 
    public Class AccountWrapper{
        @AuraEnabled
        public String name {get;set;}
        @AuraEnabled
        public String label {get;set;}
        @AuraEnabled
        public List<Items> items {get;set;}
    }
    public Class Items{
        @AuraEnabled
        public String name {get;set;}
        @AuraEnabled
        public String label {get;set;}
        @AuraEnabled
        public List<Items> items {get;set;}
    }

Output:
User-added image

I hope you find the above solution helpful. If it does mark as best answer to help others too.

Thanks,
Ramesh D
DesaiDesai
Hi Ramesh,
In the above screenshot, there are only two columns, Name and Phone(Which can be of account and Contact). I wanted to know if we can display Account Field Name and Values and contact field Name and its value . is this possible ?
Something Like this
> Name    Account #    Phone
   Desai      123214       657657
   > FirstName      LastName    Email                Phone
       XYZ                abc              abc@l.com       658
       > OppName      Opp#     Status
           Opp1               566      Open
 

Regards,
Desai

 
DesaiDesai
Hi,

Is this possible to do  ?

Regards,
Desai
Ramesh DRamesh D
Hi Desai,

It's possible to add columns but not hide them from Account (if you use Gridtree) something like this
User-added image

If you want a different view like your's you must go for Tables rather than gridtree
User-added image
Follow this link https://datatables.net/examples/api/row_details.html

I hope you find the above solution helpful. If it does mark as best answer to help others too.
Thanks,
Ramesh D
 
DesaiDesai
Hi Ramesh,

Thanks for the above link but this is not what i want.
Can we use two different components to show up the way i want ?

Regards,
Desai