I went through many articles where the data can be displayed in tree structure using lightning:treeGrid. It works fine w.r.t dispalying the data but the columns(of parent and child) are displyed at the top. Parent is Opportunity and child is OpportunityLineItems.
I want the column names of child reocrd to be displayed just above the child records and not at the top.As shown in figure.
Can we write a method which would return the field name and its values ?
Component
<aura:component controller="OpportunityController" implements="flexipage:availableForAllPageTypes" access="global">
<aura:attribute type="Opportunity[]" name="oppList"/>
<aura:attribute name="gridColumns" type="List" />
<aura:attribute name="gridData" type="Object" />
<aura:attribute name="gridExpandedRows" type="Object" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<div class="slds-m-around_xx-large">
<lightning:treeGrid aura:id="oppTree" columns="{!v.gridColumns}" data="{!v.gridData}" keyField="Id" expandedRows="{! v.gridExpandedRows}"/>
</div>
</aura:component>
Controller
({
doInit : function(component, event, helper) {
var columns = [
{
type: 'text',
fieldName: 'Name',
label: 'Opportunity Name'
},
{
type: 'date',
fieldName: 'CloseDate',
label: 'Close Date'
},
{
type: 'text',
fieldName: 'StageName',
label: 'Stage Name'
},
{
type: 'currency',
fieldName: 'Amount',
label: 'Amount'
},
{
type: 'text',
fieldName: 'Product2Id',
label: 'Product'
},
{
type: 'currency',
fieldName: 'ListPrice',
label: 'List Price'
},
{
type: 'number',
fieldName: 'Quantity',
label: 'Quantity'
},
{
type: 'currency',
fieldName: 'TotalPrice',
label:'Total Price'
}
];
component.set('v.gridColumns', columns);
var action = component.get("c.getOpportunityList");
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS" ) {
var resultData = response.getReturnValue();
for (var i=0; i<resultData.length; i++ ) {
resultData[i]._children = resultData[i]['OpportunityLineItems'];
delete resultData[i].OpportunityLineItems;
}
component.set('v.gridData', resultData);
}
});
$A.enqueueAction(action);
}
})
Apex Class
public class SampleAuraController {
@AuraEnabled
public static List <Opportunity> getOpportunityList() {
List<Opportunity> oppList = new List<Opportunity>();
oppList=[SELECT Name, CloseDate, StageName, Amount,(Select ListPrice,
Quantity, Name, TotalPrice From OpportunityLineItems) From Opportunity limit 5 ];
return oppList;
}
}
