Lightning datatable dynamic creation-adding onrowselection event issue

[AvijitGoraiGitHub]

I can able to dynamically create and view lightning data table. But as soon as I am adding "onrowselection":component.getReference("c.getSelectedRecord") line, datatable is not rendering.

Error Reproduce: I have prepared demo code below.

demoDynamicDataTable.cmp

<aura:component controller="demoDynamicDataTableController">
    <aura:attribute name="returnList" type="Contact[]" access="public"/>
    <aura:attribute name="returnColumns" type="List" access="public"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <lightning:button label="Create Data Table" onclick="{!c.createDT}" variant="brand"/>
    
    <div aura:id="newDtPlaceholder">
        {!v.body}
    </div>
</aura:component>

demoDynamicDataTableController.js

({
    doInit : function(component,event,helper) {
        console.log("doinit");
        //Column data for the table
        var columns = [
            {
                label:'Customer Name',
                fieldName:'Name',
                type:'text'
            },
            {
                label:'Phone#',
                fieldName:'Phone',
                type:'text'
            }
        ];
        //pass the column information
        component.set("v.returnColumns",columns);
        
        //recriving data from server
        helper.fetchData(component);
    },
    createDT : function(component, event, helper) {
        //Creating dynamic Lightning datatable
        
        var targetCmp=component.find("newDtPlaceholder");
        targetCmp.set("v.body",[]); //destroying existing one
        
        $A.createComponent(
            "lightning:datatable",
            {
                "data":component.get("v.returnList"),
                "columns":component.get("v.returnColumns"),
                "keyField":"Id",
                "maxRowSelection":"1",
                "onrowselection":component.getReference("c.getSelectedRecord") //adding this line is causing the issue. But I need to hookup onrowselection event
            },
            function(tbl,state,message)
            {
                console.log(state +" - " +message);
                var body=targetCmp.get("v.body");
                body.push(tbl);
                targetCmp.set("v.body",body);
            }
        );
    },
    getSelectedRecord: function(component, event, helper){ 
        var selectedRows = event.getParam('selectedRows');
        console.log(JSON.stringify(selectedRows[0]));
    }
})

demoDynamicDataTableHelper.js

({
    fetchData : function(cmp) {
        var action = cmp.get("c.getContact");
        
        action.setCallback(this,function(resp){
            var state = resp.getState();
            
            if(state === 'SUCCESS'){
                var records = resp.getReturnValue();
                //console.log(JSON.stringify(records));
                //pass the records to be displayed
                cmp.set("v.returnList",records);
            }
        });
        $A.enqueueAction(action);   
    }
})

demoDynamicDataTableController.apxc

public class demoDynamicDataTableController {
    @AuraEnabled
    public static List<Contact> getContact(){
        return [Select Id,Name,Phone from Contact];
    }
}

demoDynamicDataTableApp.app

<aura:application extends="force:slds">
    <c:demoDynamicDataTable/>
</aura:application>

[justise]

Don’t get reference to c. Try just camp.get(“c.action”)

…

Sent from my iPhone

On May 1, 2018, at 3:17 AM, AvijitGoraiGitHub ***@***.***> wrote: Any help? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[AvijitGoraiGitHub]

Changed to component.get("c.getSelectedRecord") but this did not helped.

[angelsalazar-zz]

every lightning component has an implicit body attribute, the code below is just pointless

.cmp file

<div aura:id="newDtPlaceholder">
        {!v.body}
</div>

controller.js file

var targetCmp=component.find("newDtPlaceholder");
      targetCmp.set("v.body",[]); //destroying existing one

I suggest to do the following updates

.cmp file

- <div aura:id="newDtPlaceholder">
+ <div>
        {!v.body}
</div>

controller.js file

- var targetCmp=component.find("newDtPlaceholder");
-        targetCmp.set("v.body",[]); //destroying existing one
+ component.set('v.body', []); // destroying existing one

$A.createComponent(
            "lightning:datatable",
            {
                "data":component.get("v.returnList"),
                "columns":component.get("v.returnColumns"),
                "keyField":"Id",
                "maxRowSelection":"1",
                "onrowselection":component.getReference("c.getSelectedRecord") //adding this line is causing the issue. But I need to hookup onrowselection event
            },
            function(tbl,state,message)
            {
+              console.log(state +" - " +message);
+              if (status === 'SUCCESS' && tbl.isValid()) {
-                   console.log(state +" - " +message);
-                var body=targetCmp.get("v.body");
-                body.push(tbl);
-                targetCmp.set("v.body",body);
+               component.set('v.body', [tbl]);
+             } else {
+               console.log('Unable to created component')
+              // Implement error handling
            }
        );