function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ 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!
 
pkulkarnipkulkarni
what Anshul_Goyal has implemented worked for me with some syntax changes in LWC too. Thank you.
Praky Jain 15Praky Jain 15
@pkulkarni - Do you have lwc solution for this? I am facing the same issue. Please help.
Lucia Gil 9Lucia Gil 9
For LWC there is this possible solution: 
Modify the onrowselection event's handler to include event as a parameter, then read the value from event.detail.config.action, if you are collapsing/expanding a row it should be undefined, if you select a row its value should be "rowSelect" and if you are deselecting the row it should be "rowDeSelect".
In this way you can add logic inside the onrowselection method:
  
handlerowselection(event) {
if(event.detail.config.action == "rowSelect" ) {
// do something
} else if ((event.detail.config.action == "rowSelect" ) {
// do another thing
}
}

Salesforce is yet to document this behaviour in Lightning-tree-grid documentation.