+ Start a Discussion
ANITHA BEEMUANITHA BEEMU 

Hi can anyone help on this..i created a lightning component to show in tree grid format all the parents and related childs and their related childs and vice versa...bin log its showing but in UI, its not showing.. any help please

Hi can anyone help on this..i created a lightning component to show in tree grid format all the parents and related childs and their related childs and vice versa...bin log its showing but in UI, its not showing.. any help please

here is my component:

<aura:component controller="Test_SubProductsUser-added image" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="gridColumns" type="List"/>
    <aura:attribute name="gridData" type="Object"/>
    <aura:attribute name="sku" type="string"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <!--<lightning:accordion aura:id="accordion" activeSectionName="B">
        <lightning:accordionSection name="B" label="Sub Components">-->
            <lightning:treeGrid aura:id="subProdTreegridID" 
                                columns="{!v.gridColumns }"
                                data="{!v.gridData }"                               
                                keyField="KeyField"
             />
        <!--</lightning:accordionSection>
    </lightning:accordion>-->
    
</aura:component>


my controller:

({
    doInit : function(cmp, event, helper){
        cmp.set('v.gridColumns',[
            {label:'Product Name', fieldName:'productName', type:'text'},
            {label:'Product Code', fieldName:'productCode', type:'text'},            
        ]);
        var skuVal = cmp.get('v.sku');
        var action = cmp.get('c.getRelatedProducts');
        action.setParams({sku:skuVal});
        action.setCallback(this,function(response){
            var state = response.getState();
            console.log('**state-->'+state);
            if(state === "SUCCESS"){
                var data = response.getReturnValue();
                console.log('**data-->'+data);
                JSON.parse(response.getReturnValue());                        
                var temojson = JSON.parse(JSON.stringify(data).split('items').join('_children'));
                console.log('**temojson-->'+temojson);
                cmp.set('v.gridData',temojson);
                console.log('**gridData-->'+cmp.get('v.gridData'));
            }
        });
    $A.enqueueAction(action);
    } 
})


my Apex code:

public class Test_SubProducts {    
    static map<Id,list<Id>> productIdsMap = new map<Id,list<Id>>();
    static list<Id> parentProductIds;
    static list<Id> childProductIds;
    
    //get the products in Tree.
    @AuraEnabled
    public static string getRelatedProducts(string sku){        
        list<Product_Relationships__c> prodRelaList = new list<Product_Relationships__c>();
        list<Id> produIds;
        map<Id,Product2> productMap;
        
        prodRelaList = [Select Parent_Sku__c,Child_Sku__c from Product_Relationships__c where Parent_Sku__r.ProductCode =: sku];
               
        return JSON.serializePretty(getHeirarchy(prodRelaList));
    }
    
    static list<Product_Relationships__c> getProductRelationShip(list<Id> productIds){
        return [Select Parent_Sku__c,Child_Sku__c from Product_Relationships__c where Parent_Sku__c IN: productIds];
    }
    
    //get the parent and child products ids
    static void getProductIds(list<Product_Relationships__c> prodRelaList){
        if(prodRelaList != null && !prodRelaList.isEmpty()){
            productIdsMap = new map<Id,list<Id>>();
            parentProductIds = new list<Id>();
            childProductIds = new list<Id>();
                       
            for(Product_Relationships__c prodRela: prodRelaList){
                if(prodRela.Parent_Sku__c != null){
                    parentProductIds.add(prodRela.Parent_Sku__c);
                    if(prodRela.Child_Sku__c != null){
                        childProductIds.add(prodRela.Child_Sku__c);                        
                        if(productIdsMap.containsKey(prodRela.Parent_Sku__c)){
                            productIdsMap.get(prodRela.Parent_Sku__c).add(prodRela.Child_Sku__c);
                        }else{
                            productIdsMap.put(prodRela.Parent_Sku__c,new list<Id>{prodRela.Child_Sku__c});
                        }                        
                    }                    
                }                    
            }//end of for
        }        
    }
    
    static map<Id,Product2> getProducts(set<Id> productsIds){
        return new Map<Id,Product2>([Select Id, Name, ProductCode, Description from Product2 where ID IN: productsIds]);
    }
            
    static list<ProductsWrapper> getHeirarchy(List<Product_Relationships__c> topProds){
        list<ProductsWrapper> prodWrapList = new list<ProductsWrapper>();
        
        if(topProds != null && !topProds.isEmpty()){
            getProductIds(topProds);
            
            if(parentProductIds != null && !parentProductIds.isEmpty()){
                set<Id> productIds = new set<Id>();
                productIds.addAll(parentProductIds);
                if(childProductIds != null && !childProductIds.isEmpty()){                    
                    productIds.addAll(childProductIds);
                }//end of if childproductids check.
                
                map<Id,Product2> prodMap = new map<Id,Product2>();
                prodMap = getProducts(productIds);
                for(Id prodId: parentProductIds){
                    ProductsWrapper prodWrapInst = new ProductsWrapper();
                    prodWrapInst.keyField = prodId;
                    prodWrapInst.productName = prodMap.get(prodId).Name;
                    prodWrapInst.productCode = prodMap.get(prodId).ProductCode;
                    list<Items> level1Prods = new list<Items>();
                    if(productIdsMap.containsKey(prodId) && productIdsMap.get(prodId) != null){
                        for(Id childProdId: productIdsMap.get(prodId)){
                            Items level1Child = new Items();
                            level1Child.keyField = childProdId;
                            level1Child.productName = prodMap.get(childProdId).Name;
                            level1Child.productCode = prodMap.get(childProdId).ProductCode;
                            
                            level1Prods.add(level1Child);
                        }
                        
                    }//end of if prodidmap check.
                    prodWrapInst.items = level1Prods;
                    prodWrapList.add(prodWrapInst);
                }//end of for parentids.                
            }//end of if parentproductids check.
        }//end of if topproduts check.
        
        return prodWrapList;
    }
           
    //Wrapper Class for Parent Products and Child Products.
    public Class ProductsWrapper{
        @AuraEnabled
        public String KeyField {get;set;}
        @AuraEnabled
        public String productName {get;set;}
        @AuraEnabled
        public String productCode {get;set;}
        @AuraEnabled
        public List<Items> items {get;set;}
    }
    
    //Wrapper Class for Child Products and Child Products.
    public Class Items{
        @AuraEnabled
        public String KeyField {get;set;}
        @AuraEnabled
        public String productName {get;set;}
        @AuraEnabled
        public String productCode {get;set;}
        
    }

}
AnudeepAnudeep (Salesforce Developers) 
I recommend creating a simple tree grid to confirm if it is working fine and then narrow down your code
 
<aura: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>

</aura:component>

Controller
 
({ // eslint-disable-line
    init: function (cmp) {
        var columns = [
            {
                type: 'text',
                fieldName: 'accountName',
                label: 'Account Name',
                initialWidth: 300
            },
            {
                type: 'number',
                fieldName: 'employees',
                label: 'Employees'
            },
            {
                type: 'phone',
                fieldName: 'phone',
                label: 'Phone Number'
            },
            {
                type: 'url',
                fieldName: 'accountOwner',
                label: 'Account Owner',
                typeAttributes: {
                    label: { fieldName: 'accountOwnerName' }
                }
            },
            {
                type: 'text',
                fieldName: 'billingCity',
                label: 'Billing City'
            }
        ];

        cmp.set('v.gridColumns', columns);

        // data
        var nestedData = [
            {
                "name": "123555",
                "accountName": "Rewis Inc",
                "employees": 3100,
                "phone": "837-555-1212",
                "accountOwner": "http://example.com/jane-doe",
                "accountOwnerName": "Jane Doe",
                "billingCity": "Phoeniz, AZ"
            },

            {
                "name": "123556",
                "accountName": "Acme Corporation",
                "employees": 10000,
                "phone": "837-555-1212",
                "accountOwner": "http://example.com/john-doe",
                "accountOwnerName": "John Doe",
                "billingCity": "San Francisco, CA",
                "_children": [
                    {
                        "name": "123556-A",
                        "accountName": "Acme Corporation (Bay Area)",
                        "employees": 3000,
                        "phone": "837-555-1212",
                        "accountOwner": "http://example.com/john-doe",
                        "accountOwnerName": "John Doe",
                        "billingCity": "New York, NY",
                        "_children": [
                            {
                                "name": "123556-A-A",
                                "accountName": "Acme Corporation (Oakland)",
                                "employees": 745,
                                "phone": "837-555-1212",
                                "accountOwner": "http://example.com/john-doe",
                                "accountOwnerName": "John Doe",
                                "billingCity": "New York, NY"
                            },
                            {
                                "name": "123556-A-B",
                                "accountName": "Acme Corporation (San Francisco)",
                                "employees": 578,
                                "phone": "837-555-1212",
                                "accountOwner": "http://example.com/jane-doe",
                                "accountOwnerName": "Jane Doe",
                                "billingCity": "Los Angeles, CA"
                            }
                        ]
                    },

                    {
                        "name": "123556-B",
                        "accountName": "Acme Corporation (East)",
                        "employees": 430,
                        "phone": "837-555-1212",
                        "accountOwner": "http://example.com/john-doe",
                        "accountOwnerName": "John Doe",
                        "billingCity": "San Francisco, CA",
                        "_children": [
                            {
                                "name": "123556-B-A",
                                "accountName": "Acme Corporation (NY)",
                                "employees": 1210,
                                "phone": "837-555-1212",
                                "accountOwner": "http://example.com/jane-doe",
                                "accountOwnerName": "Jane Doe",
                                "billingCity": "New York, NY"
                            },
                            {
                                "name": "123556-B-B",
                                "accountName": "Acme Corporation (VA)",
                                "employees": 410,
                                "phone": "837-555-1212",
                                "accountOwner": "http://example.com/john-doe",
                                "accountOwnerName": "John Doe",
                                "billingCity": "New York, NY",
                                "_children": [
                                    {
                                        "name": "123556-B-B-A",
                                        "accountName": "Allied Technologies",
                                        "employees": 390,
                                        "phone": "837-555-1212",
                                        "accountOwner": "http://example.com/jane-doe",
                                        "accountOwnerName": "Jane Doe",
                                        "billingCity": "Los Angeles, CA",
                                        "_children": [
                                            {
                                                "name": "123556-B-B-A-A",
                                                "accountName": "Allied Technologies (UV)",
                                                "employees": 270,
                                                "phone": "837-555-1212",
                                                "accountOwner": "http://example.com/john-doe",
                                                "accountOwnerName": "John Doe",
                                                "billingCity": "San Francisco, CA"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },

            {
                "name": "123557",
                "accountName": "Rhode Enterprises",
                "employees": 6000,
                "phone": "837-555-1212",
                "accountOwner": "http://example.com/john-doe",
                "accountOwnerName": "John Doe",
                "billingCity": "New York, NY",
                "_children": [
                    {
                        "name": "123557-A",
                        "accountName": "Rhode Enterprises (UCA)",
                        "employees": 2540,
                        "phone": "837-555-1212",
                        "accountOwner": "http://example.com/john-doe",
                        "accountOwnerName": "John Doe",
                        "billingCity": "New York, NY"
                    }
                ]
            },

            {
                "name": "123558",
                "accountName": "Tech Labs",
                "employees": 1856,
                "phone": "837-555-1212",
                "accountOwner": "http://example.com/john-doe",
                "accountOwnerName": "John Doe",
                "billingCity": "New York, NY",
                "_children": [
                    {
                        "name": "123558-A",
                        "accountName": "Opportunity Resources Inc",
                        "employees": 1934,
                        "phone": "837-555-1212",
                        "accountOwner": "http://example.com/john-doe",
                        "accountOwnerName": "John Doe",
                        "billingCity": "Los Angeles, CA"
                    }
                ]
            }
        ];

        cmp.set('v.gridData', nestedData);


        var expandedRows = ["123556", "123556-A", "123556-B", "123556-B-B", "123557"];

        cmp.set('v.gridExpandedRows', expandedRows);
    }
}); // eslint-disable-line

Example is taken from the documentation

Let me know if this helps