lightning:treeGrid Row level actions
A lightning:treeGrid component displays hierarchical data in a table. Its appearance resembles lightning:datatable, with the exception that each row can be expanded to reveal a nested group of items. Rows that contain nested data display a chevron icon to denote that they can be expanded or collapsed. In this example, I will show how to use the row-level actions on the tree grid as shown below.
Apex Class
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
public class TreeGridExamples { @AuraEnabled public static void deleteSobject(String id){ Database.delete(id); } @AuraEnabled public static String getTreeGridData(){ List<Account> accs = [Select Id , Name,(Select Id , Name from Contacts) from Account]; Map<Id , Contact> opps =new Map<Id , Contact>( [Select Id , Name,(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.id =a.id ; List<Items> co = new List<Items>(); for(Contact c : a.Contacts){ Items conWrapp = new Items(); conWrapp.name =c.Name ; conWrapp.id =c.id ; List<Items> wrapperOooo = new List<Items>(); for(Opportunity o : opps.get(c.Id).Opportunities){ Items ooo = new Items(); ooo.name = o.Name ; ooo.id = o.id ; 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 id {get;set;} @AuraEnabled public List<Items> items {get;set;} } public Class Items{ @AuraEnabled public String name {get;set;} @AuraEnabled public String id {get;set;} @AuraEnabled public List<Items> items {get;set;} } } |
Lightning Component
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<aura:component controller="TreeGridExamples" implements="flexipage:availableForAllPageTypes,force:appHostable,flexipage:availableForRecordHome,force:hasRecordId,force:hasSObjectName"> <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> <aura:attribute name="gridColumns" type="List" /> <aura:attribute name="gridData" type="Object" /> <aura:attribute name="gridExpandedRows" type="Object" /> <lightning:treeGrid columns="{! v.gridColumns }" data="{! v.gridData }" keyField="name" aura:id="mytree" onrowaction="{!c.onRowSelect}" /> </aura:component> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
({ doInit: function (cmp, event, helper) { var actions = [ { label: 'Show details', name: 'show_details' }, { label: 'Delete', name: 'delete' } ]; cmp.set('v.gridColumns', [ {label:"name", fieldName:"name", type:"text"}, {label:"id", fieldName:"id", type:"text"}, { type: 'action', typeAttributes: { rowActions: actions } } ]); helper.getData(cmp); }, onRowSelect: function(cmp,event,helper){ var action = event.getParam('action'); var row = event.getParam('row'); switch (action.name) { case 'show_details': var urlEvent = $A.get("e.force:navigateToURL"); urlEvent.setParams({ "url": "/"+row.id }); urlEvent.fire(); break; case 'delete': var action = cmp.get("c.deleteSobject"); action.setParams({id:row.id}); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { $A.get('e.force:refreshView').fire(); } }); $A.enqueueAction(action); break; } }, }) |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
({ 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); } }) |
