You need to sign in to do that
Don't have an account?
Andy Kallio 7
Datatable does not show 'editable' data until click on
Hello. I'm an admin just trying to adapt examples I've found on blogs into something for my use case. I am trying to create a data table that can be edited. It's almost working but there is one problem. The columns that I have tagged to be 'editable' do not display any data until they have been clicked on. Here is a screenshot to demonstrate. Hoping someone out there has run into this before. Thanks!!
Component:
js helper
apex controller
Component:
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="leadGen_Inv_LEXController" > <aura:attribute name="data" type="Object"/> <aura:attribute name="columns" type="List"/> <aura:attribute name="recordId" type="String"/> <!-- This attribute will hold the update records from data table--> <aura:attribute name="updatedRecord" type="Object[]" /> <aura:handler name="init" action="{!c.doInit}" value="{!this}"/> <!-- You must define keyField as 'Id' to save the record back in Salesforce 'onsave' attribute will executed when user clicks on save button --> <lightning:card title="Account Editable Datatable"> <lightning:datatable aura:id="iliDataTable" columns="{! v.columns }" data="{! v.data }" keyField="Id" onsave ="{!c.onSave}" hideCheckboxColumn="true" onrowaction="{! c.handleRowAction }" /> </lightning:card> </aura:component>js controller
({ /* * This function defined column header * and calls getAccounts helper method for column data * editable:'true' will make the column editable * */ doInit : function(component, event, helper) { component.set('v.columns', [ {label: 'Name', fieldName: 'Name', type: 'String'}, {label: 'Description', fieldName: 'Line_Item_Description__c', editable:'true', type: 'String'}, {label: 'Quantity', fieldName: 'Quantity__c', editable:'true', type: 'Integer'}, {label: 'Sales Price', fieldName: 'Sub_Total__c', editable:'true', type: 'Integer'} ]); helper.getILIs(component, helper); }, /* * This function is calling saveDataTable helper function * to save modified records * */ onSave : function (component, event, helper) { helper.saveDataTable(component, event, helper); } })
js helper
({ getILIs : function(component, event, helper) { var invoiceId = component.get("v.recordId"); var action = component.get("c.getILIs"); action.setParams({ "invoiceId" : invoiceId }); action.setCallback(this,function(response) { var state = response.getState(); if (state === "SUCCESS") { component.set("v.data", response.getReturnValue()); } }); $A.enqueueAction(action); }, /* * This function gets called when user clicks on Save button * user can get all modified records * and pass them back to server side controller * */ saveDataTable : function(component, event, helper) { var editedRecords = component.find("iliDataTable").get("v.draftValues"); var totalRecordEdited = editedRecords.length; var action = component.get("c.updateILIs"); action.setParams({ 'editedILIList' : editedRecords }); action.setCallback(this,function(response) { var state = response.getState(); if (state === "SUCCESS") { //if update is successful if(response.getReturnValue() === true){ helper.showToast({ "title": "Record Update", "type": "success", "message": totalRecordEdited+" Account Records Updated" }); helper.reloadDataTable(); } else{ //if update got failed helper.showToast({ "title": "Error!!", "type": "error", "message": "Error in update" }); } } }); $A.enqueueAction(action); }, /* * Show toast with provided params * */ showToast : function(params){ var toastEvent = $A.get("e.force:showToast"); if(toastEvent){ toastEvent.setParams(params); toastEvent.fire(); } else{ alert(params.message); } }, /* * reload data table * */ reloadDataTable : function(){ var refreshEvent = $A.get("e.force:refreshView"); if(refreshEvent){ refreshEvent.fire(); } }, })
apex controller
public class leadGen_Inv_LEXController { @AuraEnabled public static List<Invoice_Line_Item__c> getILIs(Id invoiceId){ return [SELECT Id ,Name ,Line_Item_Description__c ,Quantity__c ,Sub_Total__c FROM Invoice_Line_Item__c where Invoicing__c = :invoiceId]; } @AuraEnabled public static boolean updateILIs(List<Invoice_Line_Item__c> editedILIList){ try{ update editedILIList; return true; } catch(Exception e){ return false; } } }