3

I am trying to make a functionality where my lightning component shows a table of records and I want to make it so if you click a records row, it autofills my form with that records information.

Here is a snippet of my code right now. From what i've tried I can only get the values and not the but I just want it so you can click anywhere on the row and it logs the row information.

Component

<tbody>
 <aura:iteration items="{!v.CTransactions}" var="CT" indexVar="indx">
  <tr  title="{!indx}" value="{!CT.Id}" onclick="{!c.test}">
   <td><div class="slds-truncate" title="{!CT.Id}">{!CT.Name}</div></td>
   <td><div class="slds-truncate" title="StartDate">{!CT.Billing_Period_Start__c}</div></td>
   <td><div class="slds-truncate" title="EndDate">{!CT.Billing_Period_End__c}</div></td>
   <td><div class="slds-truncate" title="itemCount">{!CT.No_of_Items__c}</div></td>
  </tr>
 </aura:iteration>
</tbody>

js controller

test : function(component, event, helper)
{
    var target = event.target.getAttribute('title'); //|| event.target.parentNode.getAttribute('value') || event.target.parentNode.parentNode.getAttribute('value');
    console.log(target);
},  
0

if you want get entire row item value when ever click any where in the row, should get by only via index. in your case please try with below code i already tested and let me know if any issue.

SEtesting.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
 <aura:attribute name="CTransactions" type="List" default="[]"></aura:attribute>
<aura:handler name="init" value="{!this}" action="{!c.doinit}"></aura:handler>
<table class="slds-table slds-table_bordered slds-table_cell-buffer"> 
    <thead>
        <tr class="slds-text-title_caps">
            <th scope="col">
                <div class="slds-truncate" title="First Name">Tester</div>
            </th>
            <th scope="col">
                <div class="slds-truncate" title="Last Name">Name</div>
            </th>

        </tr>
    </thead>   
    <tbody>
         <aura:iteration items="{!v.CTransactions}" var="item" indexVar="index">
            <tr class="slds-text-title_caps" data-record="{!index}" onclick="{!c.test}">
                <td><div class="slds-truncate" title="job">{!item.job}</div></td>
                <td><div class="slds-truncate" title="StartDate">{!item.Name}</div></td>
            </tr>
        </aura:iteration>
    </tbody>
</table>

<lightning:input label ="seelcted row" aura:id="selecteditem" value=""></lightning:input>

SEtestingController.js

({
doinit : function(component, event, helper) {
    var items = [];

    items.push({'job' : 'elctrical', 'Name' : 'abc'});
    items.push({'job' : 'fitter', 'Name' : 'xyz'});

    component.set("v.CTransactions",items);

},
 test : function(component, event, helper)
{
    var target = component.get("v.CTransactions")[event.currentTarget.dataset.record],
        selectedrow = JSON.stringify(target);
      component.find("selecteditem").set('v.value', selectedrow);
    console.log(target);
},

enter image description here

2
  • Are you sure this works? For me locker service did not allow to access html data properties of tr
    – Raul
    May 8 '19 at 16:47
  • yes it's work for me , edited with tested code and image
    – sdandamud1
    May 8 '19 at 17:35
0

As an alternate, you can create a separate component to display the row. On click, you know certainly the record/ value to used.

Also, to improve design further

  1. Create a row component to display individual row
  2. From row component invoke an event with the details of selected row (let's say, showTransaction)
  3. Create a separate component to show edit form. This should handle showTransaction event and show details, as per data provided in event parameters.

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.