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

0

try using

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

instead of

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

when you are dynamically creating the lightning:datatable component

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.