You need to sign in to do that
Don't have an account?
sheila srivatsav
Inline editing not working in datatable
I am using google crome browser and performing inline editing on lightning datatable.
I am able to display the field values but when I edit Opportunity Name and click save its not saving.
Please let me know the issue.
I am able to display the field values but when I edit Opportunity Name and click save its not saving.
Please let me know the issue.
public class DataTableController { @AuraEnabled public static List<Opportunity> getOpportunities() { List<Opportunity> oppList=new List<Opportunity>(); oppList=[select Name,Account.Name,StageName,CloseDate,Amount from Opportunity where Amount != NULL]; return oppList; } @AuraEnabled public static void updateOpportunities(List<Opportunity> oppsList){ try { Database.update(oppsList); } catch(Exception ex) { system.debug(ex.getMessage()); } } } <aura:component implements="force:appHostable,force:hasRecordId,flexipage:availableForAllPageTypes" controller="DataTableController" access="global"> <!-- Three important parts of datatable is Key , data and columns so we need attribute for data and columns(metatadata)--> <!-- attributes --> <aura:attribute name="data" type="Object"/> <aura:attribute name="columns" type="List"/> <aura:attribute name="updatedRecord" type="Object[]" /> <!-- handlers--> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <lightning:card title="OpportunityDatatable"> <lightning:datatable aura:id="opportunitydatatable" keyField="id" data="{!v.data}" columns="{!v.columns}" onsave="{!c.handleSaveOpps}" hideCheckboxColumn="true"/> </lightning:card> {!updatedRecord} </aura:component> ({ doInit : function(component, event, helper) { helper.queryColumns(component,event,helper); helper.queryContacts(component,event,helper); }, handleSaveOpps: function (component, event, helper) { debugger; var draftValues = event.getParam('draftValues'); console.log(draftValues); var action = component.get('c.updateOpportunities'); action.setParams({ "oppsList": draftValues }); action.setCallback(this, $A.getCallback(function(response) { var state = response.getState(); if (state === "SUCCESS") { helper.fireSuccessToast(component); helper.fireRefreshEvt(component); } else if (state === "ERROR") { var errors = response.getError(); console.error(errors); helper.fireFailureToast(component); } })); $A.enqueueAction(action); } }) ({ queryColumns : function(component,event,helper) { component.set('v.columns', [ {label: 'Opp Name', fieldName: 'Name', editable : 'true', type: 'text'}, {label: 'Acc Name', fieldName: 'AccountName', type: 'text'}, {label: 'StageName', fieldName: 'StageName', type: 'text'}, {label: 'CloseDate', fieldName: 'CloseDate', type: 'date'}, {label: 'Amount', fieldName: 'Amount', type: 'currency', cellAttributes: { alignment: 'left' }} ]); }, queryContacts : function(component,event,helper) { var action=component.get('c.getOpportunities'); action.setParams({ }); action.setCallback(this, function(response){ var state = response.getState(); if (state === "SUCCESS") { //the following code will display the parent account name var rows = response.getReturnValue(); for (var i = 0; i < rows.length; i++) { var row = rows[i]; if (row.Account) row.AccountName = row.Account.Name; } //component.set("v.data", response.getReturnValue()); component.set("v.data", rows); } }); $A.enqueueAction(action); }, fireSuccessToast : function(component) { var toastEvent = $A.get("e.force:showToast"); toastEvent.setParams({ 'title' : 'Success', 'message' : 'Opportunities updated sucessfully.' , 'type':'success' }); toastEvent.fire(); }, fireFailureToast : function(component) { var toastEvent = $A.get("e.force:showToast"); toastEvent.setParams({ 'title' : 'Failed', 'message' : 'An error occurred. Please contact your administrator.', 'type':'error' }); toastEvent.fire(); }, fireRefreshEvt : function(component) { var refreshEvent = $A.get("e.force:refreshView"); if(refreshEvent){ refreshEvent.fire(); } } })
Greetings to you. It is a pleasure to be in touch with you again.
You need to use editable: true like this:
Also, lightning is case-sensitive. So, use Id in keyField instead of id
keyField="Id"
And you need below handler in component in order to refresh your datatable:
<aura:handler event="force:refreshView" action="{!c.doInit}" />
Below is the final code you can refer:
Component:
Controller:
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.
Thanks and Regards,
Khan Anas
All Answers
Greetings to you. It is a pleasure to be in touch with you again.
You need to use editable: true like this:
Also, lightning is case-sensitive. So, use Id in keyField instead of id
keyField="Id"
And you need below handler in component in order to refresh your datatable:
<aura:handler event="force:refreshView" action="{!c.doInit}" />
Below is the final code you can refer:
Component:
Controller:
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.
Thanks and Regards,
Khan Anas
Thanks for giving prompt reply to my posts and remembering me.
Ur code works.
I have a doubt
a. assume I make StageName as editable, so with this code I have to enter the picklist value manually, is there a way i can select the picklist value
directly from the dropdown ?
b. How 2 different handllers can have the same action {!c.doInit} ?
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler event="force:refreshView" action="{!c.doInit}" />
c. Is it possible to have delete option in datatable?
can u explain pls?
thanks
sheila
1. Currently, NO. It is an idea to include picklist in datatable: https://success.salesforce.com/ideaView?id=0873A000000PZJ4QAO
Picklist fields are not part of lightning datatable but you can use the workaround. I suggest you please refer to below links for more information on the workaround:
https://salesforce.stackexchange.com/questions/224094/is-there-a-way-to-achieve-lightningdatatable-with-picklist-field
http://www.sfdcpanda.com/lightning-datatable-with-picklist-select-powered-in-edit-mode/
2. Yes, we can use the same action method for multiple handlers. Here, you just need to refresh the datatable. So, it can be done by calling doInit method which will initialize the component again. The init handler is defined to execute some code when the component is initialized.
3. Yes, we can delete the records in datatable. We need to remove hideCheckboxColumn="true" as we need to display checkboxes to select records for deletion and we have to use onrowselection attribute in lightning:datatable.
onrowselection: The action triggered when a row is selected. Returns the selectedRows object.
Please try the below code, I have tested in my org and it is working fine.
Component:
Controller:
Helper:
Apex:
Also, if you want to delete single record using row action button then you can use {type: "button", typeAttributes: { . . .}} in datatable columns and you need to use onrowaction in lightning:datatable attribute.
onrowaction: The action triggered when a row action is clicked. By default, it also closes the row actions menu. Returns the eventDetails object.
Below is the code for the same.
Component:
Controller:
Helper:
Apex:
I hope it helps you :)
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.
Regards,
Khan Anas
I went through the code
Its working
thanks very much