Thursday, November 1, 2018

Lightning:treegrid - Displaying Account hierarchy using treegrid

Salesforce has introduced new tag called lightning:treegrid which can be used to display tree structure in tabular form. Lightning:tree can be used to display the hierarchy but if you want to display additional information then lightning:treegrid becomes useful.

If you want to lean how to use lightning:tree tag to display hierarchy for any record then refer below URL:

Lightning Tree : Generic Lightning Component to Display Hierarchy for any sObject

If you have to display account hierarchy along with another fields information as displayed in below image, then use treegrid.


Below is complete code to display account hierarchy. Just pass account record Id and lightning component will display complete hierarchy.


Hope this help!!!

18 comments:

  1. you people are really great ,i am getting the ERROR in the following lines.please help.
    component.set("v.gridData", roles[undefined]._children);
    console.log('*******treegrid data:'+JSON.stringify(roles[undefined]._children));

    ReplyDelete
  2. you people are really great ,i am getting the ERROR in the following lines.please help.
    component.set("v.gridData", roles[undefined]._children);
    console.log('*******treegrid data:'+JSON.stringify(roles[undefined]._children));

    ReplyDelete
  3. This page has an error. You might just need to refresh it.
    Error in $A.getCallback() [Cannot read property 'config' of undefined]
    Callback failed: apex://SK_AccountTreeGridCmpController/ACTION$findHierarchyData
    Failing descriptor: {c:SK_AccountTreeGridCmp}

    ReplyDelete
    Replies
    1. Hi,

      Can you please code to call this component. I just wanted to know what all parameters you are passing to this component.

      Thanks

      Delete
    2. I call the component by below code:






      Delete
  4. Thank you so much !!!

    ReplyDelete
  5. Can you please help load asynchronous on tree grid.

    ReplyDelete
  6. This works as a pro Awesome Site.

    ReplyDelete
  7. i am not able to see the code , please review the page ?

    ReplyDelete
  8. Hi, Is there a way to retain the checkbox of child rows when the parent row is expanded and collapsed? Sample code should be really helpful. I am facing one issue with the tree grid when i expand the parent row and then i checked few child rows and then collapsed and re expanded the parent row. The check boxes on child rows are no longer checked.

    ReplyDelete
  9. Can we add icons infront of Account Name to define what type of Account this is?

    ReplyDelete
  10. I am not able to view code, please recheck...

    ReplyDelete
    Replies
    1. Hello , thank you for the code sample, I need a modification in this but not able to do that, plz help in this if possible, I want to remove the arrow mark before the code if there is no child for that record. How to do that

      Delete
  11. Wow. There's some magic in there I do not understand!
    So you return a list of accounts then, somehow, created the tree structure.
    How does this section of code work?

    ----------------------
    var roles = {};
    console.log('*******apexResponse:'+JSON.stringify(apexResponse));
    var results = apexResponse;
    roles[undefined] = { Name: "Root", _children: [] };
    apexResponse.forEach(function(v) {
    expandedRows.push(v.Id);
    roles[v.Id] = {
    accountName: v.Name ,
    name: v.Id,
    Type:v.Type,
    Industry:v.Industry,
    AccountURL:'/'+v.Id,
    _children: [] };
    });
    apexResponse.forEach(function(v) {
    roles[v.ParentId]._children.push(roles[v.Id]);
    });
    component.set("v.gridData", roles[undefined]._children);
    ---------------------

    what is the [undefined] syntax?

    ReplyDelete
    Replies
    1. OK. I get it now. The accountID is usually the index but you create a special, easily identifiable, index using 'undefined' and this is the root node of everything else.
      I love it. Thank you so much for the blog.

      Delete
  12. In fact, it does the whole accounts hierarchy with a simple apex method:

    @AuraEnabled
    public static List fetchAllAccounts (){

    List accList = new List();
    accList = [SELECT Id, ParentID, Name FROM Account WHERE IsPersonAccount = false ORDER BY Name];
    return accList;
    }

    Amazing.

    ReplyDelete