0

I'm trying to create a dynamic HTML table in lightning component, but have issues on capturing the clicked record from the table. Can someone please suggest what approach should I take. In the below code Event is returning to null and would like to fetch the record which I clicked on for further processing.

Ex: when I click on United Oil & Gas, UK need to get the AccountId of respective Account.

({
    createTable : function(component, event, helper) {
        var JSONResult;
        var action = component.get("c.getAccount");
        action.setCallback(this, function(response){

            JSONResult = response.getReturnValue();
            var col = [];
            var colwithHeaderName = [];

            var table = document.createElement("table");
            table.setAttribute("class", "slds-table slds-table_bordered slds-table_cell-buffer slds-scrollable_x");
            var tr = table.insertRow(-1); 
            console.log('**col**'+col);
            for (var i = 1; i < col.length; i++) {
                var th = document.createElement("th");      
                th.setAttribute("class","slds-text-title_caps");
                var colHeaderName=col[i];

                if(colHeaderName.indexOf("__c")>-1) colHeaderName=colHeaderName.substring(0,colHeaderName.indexOf("__c"));
                if(colHeaderName.indexOf("_")>-1) colHeaderName=colHeaderName.replace("_"," ");
                th.innerHTML = colHeaderName;
                colwithHeaderName.push(colHeaderName);
                tr.appendChild(th);
            }


            for (var i = 0; i < JSONResult.length; i++) {
                tr = table.insertRow(-1);
                for (var j = 1; j < col.length; j++) {
                    var tabCell = tr.insertCell(-1);

                    if(j==1){
                        var aLink = document.createElement("a");

                        aLink.setAttribute("value",JSONResult[i][col[j]]);
                        aLink.setAttribute("data-record",j);

                         aLink.setAttribute("data-recId",JSONResult[i][col[0]]);

                        aLink.innerHTML=JSONResult[i][col[j]];
                        var recordId=JSONResult[i][col[0]];                       
                        var index=i;
                        aLink.setAttribute("id",recordId);
                        aLink.addEventListener("click", function(component,event){
                            // Would like fetch the record Id of the selected record from dataTable                           
                    });
                    tabCell.appendChild(aLink);
                }
                else{
                    tabCell.innerHTML = JSONResult[i][col[j]];
                }
            }
        }


        });
        $A.enqueueAction(action);


    },
    readTable : function(component, event, helper) {
        //Read table rows
        var staticTableDOM=document.getElementById('divTest').getElementsByTagName('table')[0]; 
        console.log('*** Table ***');
        console.log(staticTableDOM);
        console.log('*** Table Rows ***');
        console.log(staticTableDOM.rows);
        console.log('*** Table 1st Row cells ***');
        console.log(staticTableDOM.rows[0].cells);
    } 
})

0

In a function like you're setting, there's only one parameter, the event:

aLink.addEventListener("click", function(event) {

To get back in the Aura life cycle, in order to set attributes or call other controller methods, you need $A.getCallback:

aLink.addEventListener('click', $A.getCallback(function(event) {
  // Event handler code here
}));

However, doing this is problematic. It would be better to render your table using the template:

<aura:iteration items="{!accounts}" var="account">
  <tr>
   <aura:iteration items="{!account.fields}" var="field">
     <td>{!field}</td>
   </aura:iteration>
  </tr>
</aura:iteration>

Or, even better, just use lightning:datatable; it is well-suited to displaying dynamic columns and rows with minimal fuss, and you won't need to redraw the entire table every time a row or cell changes. It also has standard menu- and button-driven actions you can use to provide a consistent user interface.

1

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.