Hi,

I am new to lightning development. I have diaplay the parent records hard coded in drop down based on the select its show the child.But how to achive this with out hard coded, Parent and child records in two different component while click the parent record to diaply the associated child records in single component render based (Like Tree fromat).  Eg:   Department is Parent -> HR, Sales,Marketing   , Employee is Child -->John,William,Mac etc 

How to passing the Id 's between component ,parent and child records . Guide me to solve this. 

My Controller: 
---------------------------
public with sharing class CourseController {     
    @AuraEnabled
    public static List<Employee__c > getAllEmployees() {
        List<Employee__c > emps= [SELECT Id, Name FROM Employee__c ];        
        return emps;
    }    
    @AuraEnabled
    public static List<Employee__c > getEmployee(String deptName) {        
        List<Employee__c >  emp= [SELECT Id, Name,department__r.Name FROM Employee__c WHERE department__r.Name = : deptName];
        return emp;
    }    
}

Component 1 :Department.cmp  
---------------------------------------------------
<aura:component implements="force:appHostable" controller="DeptController">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="emp" type="Employee__c[]"/>
        <ui:inputSelect aura:id="selection" change="{!c.select}">    
            <ui:inputSelectOption text="All Employee" label="All Employee"/>
            <ui:inputSelectOption text="HR" label="HR"/>
            <ui:inputSelectOption text="Sales" label="Sales"/>
            <ui:inputSelectOption text="Marketing" label="Marketing"/>            
        </ui:inputSelect>    
        <aura:iteration var="e" items="{!v.emp}">
            <c:EmployeeList emp="{!e}"/>
        </aura:iteration>     
</aura:component>

Component 1 -  Client Side Controller
----------------------------------
({
    doInit : function(component, event, helper) {       
        helper.getAllEmployees(component);
    },    
    select : function(component, event, helper){    
        var selectcomponent = event.getSource();
        var selectVal = selectcomponent.get("v.value"); 
        if (selectVal != "All Employees"){    
            var action = component.get("e.getEmployee");
            action.setParams({
                "deptName":selectVal
            });            
            action.setCallback(this, function(response){    
                var state = response.getState();    
                if (component.isValid() && state === "SUCCESS") {    
                    component.set("v.emp", response.getReturnValue());
                }
                else {                    
                    alert('No Records Found');
                }      
            });    
            $A.enqueueAction(action);    
        }    
        else {            
            helper.getAllEmployees(component);
        }
     }
})

Component 1 - Helper.js
--------------
({
    getAllEmployees: function(cmp) {
        var action = cmp.get("e.getAllEmployees");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (cmp.isValid() && state === "SUCCESS") {
                cmp.set("v.emp", response.getReturnValue());
            }
            var toastEvent = $A.get("e.force:showToast");
            if(toastEvent){
               if (state === 'SUCCESS'){
                toastEvent.setParams({
                    "title": "Success!","message": " your records successfully loaded ."
                });
            }
            else {
                toastEvent.setParams({
                        "title": "Error!","message": " Something has gone wrong."
                });
            }  
            toastEvent.fire(); 
            }            
        });
         $A.enqueueAction(action);
    }
})

Component 2 :
---------------------
<aura:component>
        <aura:attribute name="emp" type="Employee__c"/>      
        <div class="{!v.value == 'All Employee'? 'row primary' : 'row '}" >    
            <div onclick="{!c.gotoRecord}">    
                <force:recordView recordId="{!v.emp.Id}" type="MINI"/>    
            </div>            
        </div> 
</aura:component>

Advance Thanks
Sivasakthi





​