2

I have a lightning datatable that i would like to deselect existing selected rows when i cancelled.

When i clicked cancel button, the selectedRows of lightning data table set []. using cmp.find("ltngCmp").set("v.selectedRows", []);

then again loaded lightning:dataTable the preSelected rows are rendering issue.

POCLtngDataTable.app

<aura:application extends="force:slds">

    <aura:attribute name="renderLtngDataTable" type="Boolean" default="false"/>
    <aura:attribute name="selectedRecords" type="List" default="[]" />
    <aura:attribute name="mydata" type="Object"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>


    <aura:if isTrue="{!v.renderLtngDataTable}">
        <lightning:card title="Demo">
            <aura:set attribute="actions">
                <lightning:button label="cancel" variant="brand" onclick="{!c.cancel}"/>
            </aura:set>
            <lightning:datatable aura:id="ltngCmp" data="{! v.mydata }" 
                                 columns="{! v.mycolumns }" 
                                 keyField="Id"

                                 onrowselection="{! c.getSelectedName }"/>
        </lightning:card>

        <aura:set attribute="else">

            <lightning:button label="RenderLtng" variant="netural" onclick="{!c.showLtng}"/>  

        </aura:set>

    </aura:if>


</aura:application>

POCLtngDataTableController.Js

({
    init: function (cmp, event, helper) {
        cmp.set('v.mycolumns', [
            {label: 'Name', fieldName: 'LastName', type: 'text'},
            {label: 'Email', fieldName: 'Email', type: 'email'}
        ]);

        var dataRecords = [];
        for(var i = 0; i < 5; i++){
            var dataRecordObj = {};
            dataRecordObj.Id = 'a' + i;
            dataRecordObj.LastName = 'kk' + i;
            dataRecordObj.Email = 'test'+ i +'@test.com';
            dataRecords.push(dataRecordObj);
        }
        cmp.set('v.mydata', dataRecords);
    },
    getSelectedName: function (cmp, event) {
        var selectedRecords = [];
        var selectedRows = event.getParam('selectedRows');
        // Display that fieldName of the selected rows
        selectedRows.forEach(function(selectedRow){
            selectedRecords.push(selectedRow);
        })
        cmp.set("v.selectedRecords", selectedRecords);
    },
    showLtng : function(cmp, event, helper){
        cmp.set("v.renderLtngDataTable", true);
    }, 
    cancel : function(cmp, event, helper){
        var ltngCmp = cmp.find("ltngCmp");
        if(ltngCmp){
            var selectedRows = ltngCmp.get("v.selectedRows");
            selectedRows.length = 0;
            ltngCmp.set("v.selectedRows", selectedRows);
        }
        cmp.set("v.renderLtngDataTable", false);
    }
})
Improve this question
8
  • A little confused on your approach, you should have included the selectedRows attribute on the datatable (or) you should clear the list selectedRecords by using cmp.set("v.selectedRecords",selectedRows); In your code you are asking lightning to set the value of selectedRows attribute which it never sees in your component definition
    – Rao
    Commented Apr 16, 2018 at 21:26
  • Did you try refreshing your page after the updates that you may have made in your code? I tried with your code (except for the last line in controller to be set as true) and it works fine.
    – Jayant Das
    Commented Apr 16, 2018 at 21:31
  • @JayantDas I guess the op is complaining that the cancel button is not clearing his selections that he previously made, that behavior is reproducible from his code
    – Rao
    Commented Apr 16, 2018 at 21:32
  • @Rao, I tried replicating it, but was not able to do so and it just works fine (except for the modification on the last line to be able to show the updated table). As for your initial comment, I think op is not using the original variable instead other two variables to render the datatable in the init() function and then just set the selectedRows attribute directly on datatable in cancel() function.
    – Jayant Das
    Commented Apr 16, 2018 at 21:36
  • selectedRows is not defined in his component. I guess the controller cannot find the attribute and skips that step. were you able to render the table --> select rows --> click cancel --> come back to the view and see the rows were cleared from what the op pasted here?
    – Rao
    Commented Apr 16, 2018 at 22:03

1 Answer 1

Reset to default
4

Instead of clearing the selected rows in Cancel method, do this inside showLtng method. Clear both the attribute selectedRecords and the v.selectedRows of the lightning:datatable. It will resolve your issue.

showLtng : function(cmp, event, helper){
    var selectedRowsIds = [];
    cmp.set("v.selectedRecords", selectedRowsIds);
    cmp.set("v.renderLtngDataTable", true);
    var ltngCmp = cmp.find("ltngCmp");
    if(ltngCmp){
        ltngCmp.set("v.selectedRows", selectedRowsIds);            
    }        
}, 
cancel : function(cmp, event, helper){
    cmp.set("v.renderLtngDataTable", false);        
}
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .