+ Start a Discussion
bw adminbw admin 

lightning treegrid selection goes away on expand/collapse

I am using lightning:treegrid to display hierarchy of accounts.
When I select a child from the hierarchy and then collapse its parent and expand again - the selection is gone.

This is also reproducible in the lightning component library
https://developer.salesforce.com/docs/component-library/bundle/lightning:treeGrid/example

Expand/Collapse should not affect any selection.
Dinesh_Kumar_NagarathinamDinesh_Kumar_Nagarathinam
Store selected rows in one variable.Use "ontoggle" event and make the stored rows as selected in handler of that event.
Anshul_GoyalAnshul_Goyal
This is a problem with the lightning tree grid. It is standard behavior. I had this problem too and I search a lot but did not found any solution on the internet. So I built my own custom js code for this.

All you need to do is this:

Component.cmp
<aura:attribute name="gridColumns" type="List" />
<aura:attribute name="gridData" type="Object" />
<aura:attribute name="gridExpandedRows" type="Object" />
<aura:attribute name="selectedRows" type="List"/>
<aura:attribute name="selectedRowsStored" type="List"/>
<aura:attribute name="bypassOnRowSelection" type="Boolean" default="false"/>
<aura:attribute name="expandedRowsCount" type="Integer" default="0"/>

<lightning:treeGrid columns="{! v.gridColumns }"
                                data="{! v.gridData }"
                                expandedRows="{! v.gridExpandedRows }"
                                keyField="Id"
                                aura:id="mytree"
                                selectedRows = "{!v.selectedRows}"
                                onrowselection ="{!c.onTreeGridRowSelection}"
                                ontoggle="{!c.onRowToggle}"
                                ontoggleall="{!c.onRowToggle}"
                                />

ComponentController.js
onTreeGridRowSelection : function(component, event, helper){
        //var selectedRows = event.getParam('selectedRows');
        if(!component.get('v.bypassOnRowSelection')){
            var selectedRows = event.getParam('selectedRows');
            component.set('v.selectedRowsStored', selectedRows);
        }
        component.set('v.bypassOnRowSelection', false);
    },

onRowToggle : function(component, event, helper){
        var treeGridComponent = component.find("mytree");
        if(treeGridComponent){
            //get all current expanded rows
            var currentExpandedRows = treeGridComponent.getCurrentExpandedRows();
            if(currentExpandedRows && currentExpandedRows.length != null && currentExpandedRows.length != undefined){
                //checking if row is expanding or collapsing
                if(currentExpandedRows.length >= component.get('v.expandedRowsCount')){
                    //expanding
                    var selectedRowsStoredIds = [];
                    var selectedRowsStored = component.get('v.selectedRowsStored');
                    if(selectedRowsStored && selectedRowsStored.length > 0){
                        for(var i = 0; i < selectedRowsStored.length ; i++){
                            selectedRowsStoredIds.push(selectedRowsStored[i].Id);
                        }
                    }
                    component.set('v.selectedRows', selectedRowsStoredIds);
                    
                }else{
                    //collapsing
                    component.set('v.bypassOnRowSelection', true);
                }
                //setting new current expanded row count to attribute
                component.set('v.expandedRowsCount', currentExpandedRows.length);
            }
        }
    }

Give a thumbs up if this helps you! 
Thanks!