How to get the selected record details with radio box in lightning





<aura:component controller="AccountCtrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doinit}"/>
    <aura:attribute name="Acclist" type="list"/>
    <aura:attribute name="row" type="Integer"/>
     <div>
            <table class="slds-table slds-table_cell-buffer slds-table_bordered">
              <thead>
                <tr class="slds-line-height_reset">
                   <th class="slds-text-title_caps" scope="col">
                      <div class="slds-truncate" title="Select">Select</div>
                    </th>
               <th class="slds-text-title_caps" scope="col">
                   <div class="slds-truncate" title="Account Name">Account Name</div>
                    </th>
                <th class="slds-text-title_caps" scope="col">
                      <div class="slds-truncate" title="Account Site">Account Site</div>
                   </th>
               <th class="slds-text-title_caps" scope="col">
                      <div class="slds-truncate" title="Account Number">Account Number</div>
                    </th>
                 
            </tr>
          </thead>
        <tbody>
            <aura:iteration items="{!v.Acclist}" var="item" indexVar="index">
            <tr id="{!index}" onclick="{!c.OnRow}">
                <td><ui:inputRadio name="AccountDisplay" change="{!c.onSelect}"/></td>
                <td>{!item.Name}</td>
                <td>{!item.Site}</td>
                <td>{!item.AccountNumber}</td>
            </tr>
                </aura:iteration>
        </tbody>
        </table>
    </div>
</aura:component>



Controller
----------
({
doinit : function(component, event, helper) {
var action = component.get("c.getAccountData");
        action.setCallback(this, function(response) {
            component.set("v.Acclist",response.getReturnValue());
        });
        $A.enqueueAction(action);
},onSelect: function(component, event, helper) {
        var Acclist=component.get("v.Acclist");
         var row=component.get("v.row");
        alert('Name:'+Acclist[row].Name+'   AccountNumber: '+Acclist[row].AccountNumber);
    },
    OnRow: function(component, event, helper) {
        component.set("v.row",event.currentTarget.id);
    }
   
})


Apex class
----------
public with sharing class AccountCtrl { 
    @AuraEnabled
    public static List<Account> getAccountData(){
        return [select Id,Name,Site,AccountNumber from Account where AccountNumber!=null LIMIT 5  ];
}
 
}




















Comments

  1. I still can't quite assume that I could end up being one of those reading
    the important recommendations found on your web blog.
    My family and I are seriously thankful on your generosity and for giving me the
    possibility to pursue my own chosen profession path.
    Thank you for the important information I got from your web page.

    ReplyDelete
  2. You are a very bright person!

    ReplyDelete

Post a Comment