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:


5 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