April 4, 2018

lightning:treegrid example in Salesforce

Sample Code:

AccountList.cmp:

<aura:component implements="force:appHostable" 
                controller="AccountListController">

    <aura:attribute type="Account[]" name="acctList"/>
    <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.fetchAccounts}"/>
    
    <lightning:treeGrid columns="{! v.gridColumns }"
        data="{! v.gridData }"
        keyField="Id"
        aura:id="mytree"
    />
        

</aura:component>

AccountListController.js:

({
    fetchAccounts : function(component, event, helper) {
        var columns = [
            {
                type: 'text',
                fieldName: 'Name',
                label: 'Account Name'
            },
            {
                type: 'text',
                fieldName: 'Industry',
                label: 'Industry'
            },
            {
                type: 'text',
                fieldName: 'FirstName',
                label: 'First Name'
            },
            {
                type: 'text',
                fieldName: 'LastName',
                label: 'Last Name'
            },
            {
                type: 'email',
                fieldName: 'Email',
                label: 'Email'
            }
        ];
        component.set('v.gridColumns', columns);
        var action = component.get("c.fetchAccts");
        action.setCallback(this, function(response){
            var state = response.getState();
            if ( state === "SUCCESS" ) {
                var data = response.getReturnValue();
                for ( var i=0; i<data.length; i++ ) {
                    data[i]._children = data[i]['Contacts'];
                    delete data[i].Contacts; 

                }
                component.set('v.gridData', data);
            }
        });
        $A.enqueueAction(action);
    }

})

AccountListController:

public class AccountListController {

    @AuraEnabled
    public static List < Account > fetchAccts() {
        return [ SELECT Id, Name, Industry, 
                ( SELECT FirstName, LastName FROM Contacts ) 
                FROM Account LIMIT 100 ];
    }
    

}

Output:


10 comments:

  1. Does lightning:treeGrid have a onSelect attribute like lightning:tree have? or can we restrict user to select only one row in treeGrid?

    ReplyDelete
    Replies
    1. Check this for all the attributes.
      https://developer.salesforce.com/docs/component-library/bundle/lightning:treeGrid/specification

      Delete
  2. Hi, Is there any way we can select child rows on selecting parent row? For example, We have a requirement where once user select parent account, it should select all contacts specific to that account.

    ReplyDelete
    Replies
    1. It will have child values too. Put in console.log to see it.

      Delete
    2. I have similar scenario where we can select child rows upon selecting parent row. I do not see this happen by default.

      Delete
    3. Hey @Dharmendra bhuva

      Did you got any solution for that

      Delete
  3. Hey @Dharmendra Bhuva

    Did you get the solution for that?

    ReplyDelete
  4. Hey @Magulan Duraipandian

    Did you get any solution for that?

    ReplyDelete
    Replies
    1. You can use onrowselection to find which row is selected and select the related child.

      Delete
    2. Sample code - https://www.infallibletechie.com/2020/05/lightningtreegrid-select-child-rows.html

      Delete