0

I am trying to create 'n' number of datatables on init, based on server response. I have a button as first column of each row, with 'onrowaction' configured. which is not responding. When i press the buttons, the handler method is not getting called. Below is my code excerpt:

Component:

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="headerNames" type="String[]"/>
<aura:attribute name="resultObject" type="customclass" /> 
<aura:attribute name="data" type="tableData[]" /> 
<div aura:id="dataTablePlaceholder">
    {!v.body}
</div>

Controller:

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

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

helper

{   
    setColumnHeaders : function(component, event, helper) {
        let columns = [
            {
                type: "button",
                typeAttributes: {
                    iconName: 'utility:right',
                    size:"xx-small", 
                    label: '',
                    name: 'ViewMore',
                    title: 'View More',
                    disabled: false,
                    value: 'test',
                    variant:"border-filled"
                }
            },
            {
                label:'Year',
                fieldName:'year',
                type:'text'
            }, -- MOre columns below
        ];
    component.set("v.headerNames",columns);
    },  

    fetchData : function(component, event, helper) {
        let action = component.get("c.getRecords");  
        action.setCallback(this, function(response) {
            let jsonData = JSON.parse(response.getReturnValue());
            component.set("v.resultObject", jsonData);
            this.createDataTable(component, event, helper);
        })
        $A.enqueueAction(action);    
    },

    createDataTable : function(component, event, helper) {
        let resObj = component.get("v.resultObject");
        let targetCmp=component.find("dataTablePlaceholder");
        targetCmp.set("v.body",[]); //destroying existing one
        let body=targetCmp.get("v.body");

        for (let counter = 0, maxCounter = resObj.records.length; counter < maxCounter; counter++) {
            let tableData = resObj.records[counter].programmeDetails ;
            let tableHeader = resObj.records[counter].programmeName ;

            $A.createComponents([
                ["lightning:card",{
                    "title":tableHeader,
                    "class":"slds-card slds-card_boundary cardDecorator"
                    }
                ],
                ["lightning:datatable", {
                    "auraId": "tblId_"+counter,
                    "data":tableData,
                    "columns":component.get("v.headerNames"),
                    "keyField":"id",
                    "hideCheckboxColumn":true,
                    "onrowaction":"{!c.handleRowAction}",
                    "class": "tableDecorator"                    
                }
                ]
                ],
                function (components,status, errorMessage){
                    let card = components[0];
                    let table = components[1];
                    card.set("v.body",table);
                    body.push(card);
                    if(counter === maxCounter-1){
                        targetCmp.set("v.body",body);    
                    }
                } 
            );
        }
    },

    showMoreDetails: function (component, event, helper) {
        alert('Showing Details: '); // This never happens
    }
}   

i have also tried adding below action to columns, but clicking on this also does nothing

 var actions = [
            { label: 'Show More', name: 'show_details' }
        ];

Please help

1 Answer 1

0

try using

"onrowaction": component.get("c.handleRowAction"), 

instead of

"onrowaction":"{!c.handleRowAction}", 

when you are dynamically creating the lightning:datatable component

You must log in to answer this question.

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