Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Norwill GutierrezNorwill Gutierrez 

How to setSelectedRows on lightning:treeGrid

I'm using the new component lightning:treeGrid and need to set selected multiples rows when i create or initialize the component. ?

Thats posible ?

Thanks
Jayant DasJayant Das
The component supports selectedRows attribute same as lightning:dataTable. You may like to refer more on using this attribute in the lightning:dataTable component's documentation (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_datatable.htm). Below is what the documentation states: 
Selecting Rows Programmatically
The selectedRows attribute enables programmatic selection of rows, which is useful when you want to preselect rows.
Sunil MadanaSunil Madana
Hi Norwill,
Below is the working code that expands multiple tree rows and selects a particular row even if nested on component init.

Component Code: 
<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <aura:attribute name="gridColumns" type="List" />
    <aura:attribute name="gridData" type="Object" />
    <aura:attribute name="gridSelectedRows" type="Object" />
    <lightning:treeGrid
        columns="{! v.gridColumns }"
        data="{! v.gridData }"
        selectedRows="{! v.gridSelectedRows }"
        keyField="name"
        aura:id="mytree"
    />
</aura:component>
Component controller: 
({
    init: function (cmp,event) {
        var columns = [
            {
                type: 'text',
                fieldName: 'accountName',
                label: 'Account Name'
            },
            {
                type: 'number',
                fieldName: 'employees',
                label: 'Employees'
            },
            {
                type: 'phone',
                fieldName: 'phone',
                label: 'Phone Number'
            },
            {
                type: 'url',
                fieldName: 'accountOwner',
                label: 'Account Owner',
                typeAttributes: {
                    label: { fieldName: 'accountOwnerName' }
                }
            }
        ];
        cmp.set('v.gridColumns', columns);
        var nestedData = [
            {
                "name": "123555",
                "accountName": "Rewis Inc",
                "employees": 3100,
                "phone": "837-555-1212",
                "accountOwner": "http://sfdc.co/jane-doe",
                "accountOwnerName": "Jane Doe"
            },
            {
                "name": "123556",
                "accountName": "Acme Corporation",
                "employees": 10000,
                "phone": "837-555-1212",
                "accountOwner": "http://sfdc.co/john-doe",
                "accountOwnerName": "John Doe",
                "_children": [
                    {
                        "name": "123556-A",
                        "accountName": "Acme Corporation (Bay Area)",
                        "employees": 3000,
                        "phone": "837-555-1212",
                        "accountOwner": "http://sfdc.co/john-doe",
                        "accountOwnerName": "John Doe",
                        "_children": [
                            {
                                "name": "123556-A-A",
                                "accountName": "Acme Corporation (Oakland)",
                                "employees": 745,
                                "phone": "837-555-1212",
                                "accountOwner": "http://sfdc.co/john-doe",
                                "accountOwnerName": "John Doe"
                            },
                            {
                                "name": "123556-A-B",
                                "accountName": "Acme Corporation (San Francisco)",
                                "employees": 578,
                                "phone": "837-555-1212",
                                "accountOwner": "http://sfdc.co/jane-doe",
                                "accountOwnerName": "Jane Doe"
                            }
                        ]
                    }
                ]
            },
        ];
            cmp.set('v.gridData', nestedData);
            var selectedRows = ["123556"];
            cmp.set('v.gridSelectedRows', selectedRows);
    }
})
Component Renderer: 
({
	// Your renderer method overrides go here
    afterRender : function(cmp, helper){
        this.superAfterRender();
        var tree = cmp.find('mytree');
        tree.expandAll();
    }
})
Norwill GutierrezNorwill Gutierrez
Thanks for your reply, i go to test this, only one more question this array var selectedRows = ["123556"]; is based on the keyField attribute ? I mean i f i want more rows selecteds, i have to include them on the array ? like var selectedRows = ["123555", "123556", "123556-A"]; ?? Thanks again.
Sunil MadanaSunil Madana
Yes Norwill, it is a List so you can do as you mentioned for parent rows.
But i believe it is different for children and there is no attribute to make children selected, which i have not tried. Will try and let you know.
Norwill GutierrezNorwill Gutierrez
Please let me know thanks again.
Norwill GutierrezNorwill Gutierrez
Hi Sunil Any news about selecting childrens ? For me is not working. 
Sunil MadanaSunil Madana
@Norwill, Did not get a chance to make it work. Will let you know once i have some updates by tomorrow.