function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Mike Tol 1Mike Tol 1 

Can’t save record in edit inline custom table

Hi! I novice developer and try save record in edit inline custom table. Please tell me what's wrong

Code:
Html
<template>
    <lightning-card title="Account" >
        <table border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse;" class="tblColPad">
           
            <tr>
                <th>Name</th>
                <th>Rating</th>
                <th>Dalete</th>
            </tr>
            <template for:each={getAccount.data} for:item="accountItem">
                <tr key={accountItem.Id}>
                    <td>
            
                        <template if:false={editName}>
                            <span style="border-bottom: 1px dotted black"
                              >{accountItem.Name}
                              <lightning-button-icon
                                class="slds-float_right"
                                icon-name="utility:edit"
                                alternative-text="Update Name"
                                title="Update Name"
                                variant="bare"
                                size="medium"
                                onclick={handleNameEdit}
                              ></lightning-button-icon>
                            </span>
                          </template>
                          <template if:true={editName}>
                            <lightning-input
                              name="accountItem.Id"
                              value={accountItem.Name}
                              label=""
                              onchange={handleNameChange}
                            ></lightning-input>
                            <lightning-button-icon
                              class="slds-float_right"
                              icon-name="utility:save"
                              alternative-text="Update Name"
                              title="Update Name"
                              variant="bare"
                              size="large"
                              onclick={handleUpdateName}
                            ></lightning-button-icon>
                          </template>
       
                    </td>
                    <td>{accountItem.Rating}</td>
                    <td><lightning-button label="Delete" size="small" variant="neutral"
                    onclick={handleDelete} value={accountItem.Id}
                    icon-name="utility:delete" icon-position="right"
                    class="deleteButton"></lightning-button></td>
                </tr>
            </template>
        </table>
    </lightning-card>
</template>

Js
import { LightningElement, track, wire } from 'lwc';
import getAccounts from '@salesforce/apex/ProjectFour.getAccounts';
import {deleteRecord} from 'lightning/uiRecordApi';
import {refreshApex} from '@salesforce/apex';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
 
export default class ProjectFourCustom extends LightningElement {
   
  @wire (getAccounts) getAccount;
  @track recordId;
 
@track account;
  @track accountId;
  @track accountName;
  @track accountItem
  @track error;
  @track editName = false;
//   connectedCallback() {
//     getAccounts()
//       .then((result) => {
//         this.accountId = result.Id;
//         this.accountName = result.Name;
//       })
//       .catch((error) => {
//         this.error = error;
//       });
//   }
handleNameEdit(event) {
   console.log('handleNameEdit', event);
   this.editName = true;
 }
 handleNameChange(event) {
   console.log('handleNameChange', event);
   this.accountItem = event.target.value;
 }
 handleUpdateName(event) {
   console.log('handleUpdateName', event);
   const fields = {};
   fields[ID_FIELD.fieldApiName] = this.accountId;
   fields[NAME_FIELD.fieldApiName] = this.accountItem;
   const recordInput = { fields };
   updateRecord(recordInput)
     .then(() => {
       console.log('Done', event);
       this.editName = false;
     })
     .catch((error) => {
       console.log("Error updating date => " + error.body.message);
     });
 }

  handleDelete(event){
     this.recordId = event.target.value;
     deleteRecord(this.recordId)
     .then(() =>{
 
        return refreshApex(this.getAccount);
       
     })
     .catch(error =>{
         window.console.log('Unable to delete record due to ' + error.body.message);
     });
  }
 
}

Apex
public class ProjectFour {
    
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        List<Account> accounts = [SELECT Id, Name, Rating FROM Account  Limit 3];
        return accounts;    
    } 
}
PriyaPriya (Salesforce Developers) 
Hi Mike ,

Can you please refer to below example where inline editing function is performed
https://www.infallibletechie.com/2020/10/lightning-datatable-inline-editing.html
Hope this is helpful!

Regards,
Ranjan
Mike Tol 1Mike Tol 1
Thank you, but I need to do this logics in custom table, not in datatable... I can't find such example