+ Start a Discussion
Pavushetti Abhilash 3Pavushetti Abhilash 3 

SLDS table INLINE edit. Updating records only after reloading page. Should update without reload page.

Hi folks.
I did the INLINE EDITING in SLDS table LWC. When user updated the record with INLINE EDITING and clicks on SAVE the record not updating. Record updates only when we RELOAD THE PAGE. Record should update as soon as user click on save. Please help me regarding this. Refer below HTML and JS code. Let me know any change in refreshApex()..
-------------------HTML-------------------
<template>
    <div class="slds-m-bottom_large">
        <div class="slds-grid slds-gutters">
            <div class="slds-col slds-size_4-of-5" style='font-weight: 500;font-size: 18px'>
                <span>RMA Case Line Item History</span>
            </div>
        </div>
    </div>
    <div class="landingpagebody">      
        <lightning-card title="">          
        <div class="slds-m-top_large">                  
            <lightning-datatable draft-values={draftValues}  
                                show-row-number-column 
                                onsave={handleSave} 
                                key-field="Id" 
                                data={rmarecord} 
                                columns={columns}
                                onrowselection={updateSelected}
                                oncellchange={cellChange}  
                                onclick={navRecordpage}></lightning-datatable>                             
        </div>
    </lightning-card>
    </div>
</template>
------------------------JS----------------------------
import { LightningElement, wire, track, api} from 'lwc';
import { getRecord, getFieldValue } from "lightning/uiRecordApi";
//import CONTACT_ID from "@salesforce/schema/User.ContactId";
import USER_ID from "@salesforce/user/Id";
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import getSelectedCaseLineItems from '@salesforce/apex/rmaCaseLineItemController.getSelectedCaseLineItems';
import updateCases from '@salesforce/apex/rmaCaseLineItemController.updateCases';
import { refreshApex } from '@salesforce/apex';
import { updateRecord } from 'lightning/uiRecordApi';

 // import { recordId } from 'lightning/uiRecordApi';

export default class RmaCaseLineItem extends LightningElement {
    
    @api recordId;
    objectApiName = 'R4C_Case_Line_Item__c'; 
    @track rmarecord;
    @track conid;
    @track error;
    @track draftValues = [];
    wiredRecords;

    @track columns = [ 
       
        {label:'Approval status', fieldName:'Approval_status__c', type: 'boolean',editable: true},
        {label:'PO#', fieldName:'Name', type:'url', 
        typeAttributes: {
            label: { 
                fieldName: 'Name' 
            },
            target : '_blank'
        }
        },        
        {label:'SO#', fieldName:'SO__c', type:'text'},
        {label:'PO Date', fieldName:'PO_Date__c',type:'text'},
        {label:'Sold To', fieldName:'Sold_To__c', type:'text'},
        {label:'Ship To', fieldName:'Ship_To__c', type:'text'},
        {label:'Line Item', fieldName:'Line_Item__c', type:'text'},
        {label:'Intel Product Number', fieldName:'MMID__c',type:'text'},
        {label:'Intel Product Name', fieldName:'EPM_Name__c', type:'text'},
        {label:'Customer Part Number', fieldName:'Stocking_ID__c', type:'text'},
        {label:'Quantity', fieldName:'Quantity__c', type:'text'},
        {label:'Return Quantity',fieldName:'Return_Quantity__c', type:'number'},
        {label:'Billed Quantity', fieldName:'Billed_Quantity__c',type:'text'},
        {label:'Net value', fieldName:'Net_Value__c', type:'currency'},
        
    ]
    @wire(getSelectedCaseLineItems, {caseid: '$recordId'}) caseLineItems({data, error}){
        
        if(data){
            this.rmarecord = data;
            console.log(data);
          //  console.log(recordId);
        }
        if(error){
            console.log(error);
        }
    }
    
    handleSave(event){
      //  this.draftValues = event.detail.draftValues;
        const recordInputs = event.detail.draftValues.slice().map(draft => {
            const fields = Object.assign({}, draft);
            return { fields };
        });
         console.log('RECORDINPUTS', JSON.stringify(recordInputs));
        // Updating the records using the UiRecordAPi
        const promises = recordInputs.map(recordInput => updateRecord(recordInput));
        Promise.all(promises).then(rmarecord => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Records Updated Successfully!!',
                    variant: 'success'
                })
            );
            this.draftValues = [];
            // Display fresh data in the datatable
             return this.refresh;
        }).catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error',
                    message: 'An Error Occured!!',
                    variant: 'error'
                })
            );
        })  .finally(() => {
            this.draftValues = [];
        }); 
    
    }
    
    
    
    
    // This function is used to refresh the table once data updated
    async refresh() {
        await refreshApex(this.rmarecord);
    } 
  
}
-----------------------------------------------------------------------------
ravi soniravi soni
hi,
try below Js code and tell us is it working or not.
import { LightningElement, wire, track, api} from 'lwc';
import { getRecord, getFieldValue } from "lightning/uiRecordApi";
//import CONTACT_ID from "@salesforce/schema/User.ContactId";
import USER_ID from "@salesforce/user/Id";
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import getSelectedCaseLineItems from '@salesforce/apex/rmaCaseLineItemController.getSelectedCaseLineItems';
import updateCases from '@salesforce/apex/rmaCaseLineItemController.updateCases';
import { refreshApex } from '@salesforce/apex';
import { updateRecord } from 'lightning/uiRecordApi';

 // import { recordId } from 'lightning/uiRecordApi';

export default class RmaCaseLineItem extends LightningElement {
    
    @api recordId;
    objectApiName = 'R4C_Case_Line_Item__c'; 
    @track rmarecord;
    @track conid;
    @track error;
    @track draftValues = [];
    wiredRecords;

    @track columns = [ 
       
        {label:'Approval status', fieldName:'Approval_status__c', type: 'boolean',editable: true},
        {label:'PO#', fieldName:'Name', type:'url', 
        typeAttributes: {
            label: { 
                fieldName: 'Name' 
            },
            target : '_blank'
        }
        },        
        {label:'SO#', fieldName:'SO__c', type:'text'},
        {label:'PO Date', fieldName:'PO_Date__c',type:'text'},
        {label:'Sold To', fieldName:'Sold_To__c', type:'text'},
        {label:'Ship To', fieldName:'Ship_To__c', type:'text'},
        {label:'Line Item', fieldName:'Line_Item__c', type:'text'},
        {label:'Intel Product Number', fieldName:'MMID__c',type:'text'},
        {label:'Intel Product Name', fieldName:'EPM_Name__c', type:'text'},
        {label:'Customer Part Number', fieldName:'Stocking_ID__c', type:'text'},
        {label:'Quantity', fieldName:'Quantity__c', type:'text'},
        {label:'Return Quantity',fieldName:'Return_Quantity__c', type:'number'},
        {label:'Billed Quantity', fieldName:'Billed_Quantity__c',type:'text'},
        {label:'Net value', fieldName:'Net_Value__c', type:'currency'},
        
    ]
    @wire(getSelectedCaseLineItems, {caseid: '$recordId'}) caseLineItems(value){
		this.rmarecord = value;
        if(value.data){
            
            console.log(value.data);
          //  console.log(recordId);
        }
        if(value.error){
            console.log(value.error);
        }
    }
    
    handleSave(event){
      //  this.draftValues = event.detail.draftValues;
        const recordInputs = event.detail.draftValues.slice().map(draft => {
            const fields = Object.assign({}, draft);
            return { fields };
        });
         console.log('RECORDINPUTS', JSON.stringify(recordInputs));
        // Updating the records using the UiRecordAPi
        const promises = recordInputs.map(recordInput => updateRecord(recordInput));
        Promise.all(promises).then(rmarecord => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Records Updated Successfully!!',
                    variant: 'success'
                })
            );
            this.draftValues = [];
            // Display fresh data in the datatable
             return this.refresh;
        }).catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error',
                    message: 'An Error Occured!!',
                    variant: 'error'
                })
            );
        })  .finally(() => {
            this.draftValues = [];
        }); 
    
    }
    
    
    
    
    // This function is used to refresh the table once data updated
    async refresh() {
        await refreshApex(this.rmarecord);
    } 
  
}

if above info is helpfull then don't forget to mark it as best answer.
Thank you
Pavushetti Abhilash 3Pavushetti Abhilash 3
Hi veer. Thanks for reply. I tried with above code. But its not working. This time entire table not displaying.
ravi soniravi soni
Hi Pavushetti Abhilash 3,
Please share your  entire code with Html,Js and apex I will review in my side then I will be fix it.
Thank you
jishan royjishan roy
 how to update multiple rows at a time while click on save button.