6

I have a lightning datatable that i would like to preselect all the rows when i load it. I'm currently doing like described in the lighting:datatable definition page but no luck so far

Supposedely this line is preselecting all rows as the selectedRows from datatable is binded to the attribute

component.set('v.selectedRows', selected);

FullCode:

.component

<aura:attribute name="selectedRows" type="List"/>

<lightning:datatable aura:id="partnerTable" data="{!v.partnerdata }" 
columns="{!v.partnercolumns}" keyField="Id" selectedRows="
{!v.selectedRows}"/>

.controller

searchPartners : function(component, event, helper) {
  helper.searchPartners(component, event, helper);},

.helper

searchPartners : function(component, event, helper) {
    var selectedProducts = component.get("v.selectedProducts");
    var action = component.get("c.getAccountData");
    action.setParams({
        "products": selectedProducts
    });
    var accs=[];
    var selected=[];
    action.setCallback(this, function(response) { 
        var state = response.getState();
        if (state === "SUCCESS") {
            var accounts = response.getReturnValue();
            accounts.forEach(function(account) {
                accs.push({name: account.Name, id: account.Id});
                selected.push(account.Id);
            });  
            component.set('v.partnercolumns', [                
                {label: 'Name', fieldName: 'name', type: 'text'}
            ]); 
            component.set('v.partnerdata', accs);
            component.set('v.selectedRows', selected);  
        }
        else {
            console.log("Failed with state: " + state);
        }              
    });
    $A.enqueueAction(action);         
},   
  • 2
    Javascript is case-sensitive and you name your Id field one time as id: accs.push({name: account.Name, id: account.Id}); and another time as Id: selected.push(account.Id); maybe setting all ids as Id should fix your problem – Itai Shmida Feb 7 '18 at 7:33
  • You are right on the money Itai, that seemed to be one of the reasons the component was not working correctly. As i fixed that and did some more testing i got to the conclusion that you cannot pre select the rows before the table is rendered in the UI, even if you already loaded the columns and data. Thanks for the help – R. Silva Feb 7 '18 at 15:27
  • @R.Silva - I'm facing exactly the same issue. Were you able to make it work after rendering it? I've tried to change the v.selectedRows after rendering it, but I got no luck. The values are being stored properly on this attributes, but it doesn't tick the radio button/checkboxes. – Pablo Fischer Mar 20 '18 at 12:14
4

It's possible to preselect items, however I noticed a bug on API v42 (current version) and I confirmed that with SFDC support team. When using the attribute to bind the selected rows, it simply doesn't work, however if you find the lightning:datatable and then change the selectedRows, it works properly.

    component = component.find("partnerTable");
    component.set("v.selectedRows", selectedRowsIds);

Please find an example below, I'm creating a mockdata and selecting the first item by the Id.

Component

    <aura:attribute name="partnerdata" type="Object" access="private" />
    <aura:attribute name="partnercolumns" type="List" access="private" />
    <aura:attribute name="partnerSelectedRows" type="List" access="private" default="" />

    <!--
    <lightning:datatable aura:id="partnerTable" data="{!v.partnerdata}" 
    columns="{!v.partnercolumns}" keyField="Id" selectedRows="{!v.partnerSelectedRows}"/>
    -->

    <lightning:datatable aura:id="partnerTable" data="{!v.partnerdata}" 
    columns="{!v.partnercolumns}" keyField="Id" /> 

Controller

({
    doInit : function(component, event, helper) {
        helper.getMockData(component, event, helper);
    }
})

Helper

({
    getMockData: function(component, event) {
        console.log("Load mock data!");
        component.set("v.partnercolumns", [{
                label: "Name",
                fieldName: "Name",
                type: "text"
            },
            {
                label: "Status",
                fieldName: "status__c",
                type: "text"
            },
            {
                label: "Created Date",
                fieldName: "createdate__c",
                type: "date"
            }
        ]);
        component.set("v.partnerdata", [{
                Id: "a0319000001GtsjAAC",
                Name: "John Doe",
                status__c: "Active",
                createdate__c: "2005-01-01"
            },
            {
                Id: "a0319000001GtsjAAD",
                Name: "Mary Doe",
                status__c: "Active",
                createdate__c: "2005-02-10"
            }
        ]);

        var selectedRowsIds = ["a0319000001GtsjAAC"];

        // I was expecting the line to work
        //component.set("v.partnerSelectedRows", selectedRowsIds);

        // Workaround to selectRows
        component = component.find("partnerTable");
        component.set("v.selectedRows", selectedRowsIds);

    }
})
  • 2
    Actually, it works properly when loading data from Salesforce, however, it doesn't work when using mock data. Find an example on the following link: gist.github.com/sumugapadman/b31488774df70e50c9f8bf64d3c9ac33 – Pablo Fischer Apr 23 '18 at 10:39
  • New update from salesforce support team: Our R&D team has logged a bug for the Mocked Data "Pre-Select issue" . Looks like the issue caused because of a Race Condition. The ETA of the fix is currently targeted in 214 release ( not the 214 pre-release build ) #Safe_harbor. – Pablo Fischer Apr 23 '18 at 10:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.