+ Start a Discussion
muneeswar umuneeswar u 

how to edit record on table in lightning component

Hi all,
I am unable to catch my record id during iteration on table in lighting component.Below is my code can any one help me.
Thank you.

**************************Lightning component*******************
<aura:component controller="EditContactWithButton" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <!-- aura attributes to store data/values --> 
    <aura:attribute name="ContactList" type="List"/>
    <aura:attribute name="recordId" type="String" />
    <aura:attribute name="editMode" type="boolean" default="false" />
    
    <!-- call doInit method on component load -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>   
    <aura:handler event="force:refreshView" action="{!c.doInit}" />
    
    <table class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
        <thead>
            <tr class="slds-line-height_reset">            
                <th aria-label="LastName" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
                    <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                        <span class="slds-truncate" title="LastName">LastName</span>        
                    </div>
                </th>                  
                <th aria-label="Phone" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
                    <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                        <span class="slds-truncate" title="Phone">Phone</span>
                    </div>
                </th>                  
                <th aria-label="Email" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
                    <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
                        <span class="slds-truncate" title="Email">Email</span>
                    </div>
                </th>  
            </tr>
        </thead>
        
        <tbody>
            <aura:iteration items="{!v.ContactList}" var="con" indexVar="index">
                <!--to select each row-->

                <tr class="slds-hint-parent" aura:id="rowId" >
                    
                    <td >{!con.Id}</td>  <!--tabindex="{!index}"-->
                    
                    <td>
                        <div class="slds-truncate" title="LastName" >
                            <lightning:input data-selected-Index="{!index}" aura:id="lastname" id="lastname" name="lastname" disabled="{! !v.editMode }" value="{!con.LastName}" />
                        </div>
                    </td>
                    <td>
                        <div class="slds-truncate" title="Phone" aura:id="phone">
                            <lightning:input name="Phone" disabled="true" value="{!con.Phone}" />
                        </div>
                    </td>
                    <td>
                        <div class="slds-truncate" title="Email" aura:id="email">
                           <lightning:input name="Email" disabled="true" value="{!con.Email}" />
                        </div>
                    </td>
                    <div class="slds-grid"> 
                        <button class="slds-button slds-button--brand" onclick="{!c.editFields}">Edit</button>
                    </div> 
                </tr>
            </aura:iteration>
        </tbody>
    </table>   
    <div class="slds-grid slds-grid--align-center"> 
        <button class="slds-button slds-button--brand" onclick="{!c.updateFields}">Update</button>
    </div> 
</aura:component>

********controller***********
({
    
    /**
     * functionName : doInit
     * Description  :Invokes this method on load
     **/
    doInit : function(component, event, helper) 
    {           
         // Retrieve contacts during component initialization
         helper.loadContacts(component, event, helper);
    },
       
     /**
     * functionName : updateFields
     * Description  : To update selected records
     **/
    updateFields : function(component, event, helper) 
    {
        var getAllId=component.find("rowId");
        alert(getAllId);
        var action=component.get("c.updateContact");
        alert(action);
        action.setParams({
            "lstRecordId":getAllId
        });
        action.setCallback(this, function(response)
                           {
                               var state=response.getState();
                               if(state === "SUCCESS")
                               {
                                   console.log(state);
                                   $A.get('e.force:refreshView').fire();
                               }
                           });
        $A.enqueueAction(action);
    },
    
    /**
     * functionName : editFields
     * Description  : To edit selected record
     **/
    editFields : function(component, event, helper) 
    {
        alert("test edit");
        
        var target = event.target;
        var dataEle = target.getAttribute("data-selected-Index");
        

       //document.getElementById('input-2').disabled=false;
        component.find("lastname").set("v.disabled", false);
        
        
        console.log("Component at index "+dataEle); //+" has value "+target.value
    },    
    
    /**
     * functionName : saveRecord
     * Description  : To Save a selected record
     **/
    saveRecord :  function(component, event, helper) 
    {
        
    }   
})

******helper ***************
({
    /**
     * functionName : loadContacts
     * Description  : This method is invoked by the doInit method on load
     **/
    loadContacts : function(component, event, helper)
    {
        // Load all contact data
        var action=component.get("c.fetchContact");
        action.setCallback(this, function(response)
                           {
                               var state=response.getState();
                               if(state === 'SUCCESS')
                               {
                                   component.set('v.ContactList',response.getReturnValue());                               
                               }                           
                           });  
        $A.enqueueAction(action);      
    }
})

**********apex class **********

public with sharing class EditContactWithButton 
{
    @AuraEnabled
    public static List<Contact> fetchContact()
    {
        //getting records from contact obj
        return [select Id,LastName,Update_Time__c,Phone,Email from Contact limit 10];
    }
    
    @AuraEnabled
    public static void updateContact(List<String> lstRecordId)
    {
        //List to store updated contacts
        List<Contact> lstUpdate=new List<Contact>();
        for(Contact con:[select Id,LastName,Update_Time__c,Phone,Email from Contact where Id=:lstRecordId]) 
        {
          
            con.Phone='123';
            con.Email='';
            //adding records to list
            lstUpdate.add(con);
        }
        if(lstUpdate.size()>0)
        {
            update lstUpdate;
        }      
    }    
}

 
muneeswar umuneeswar u
User-added image