1

In my workaround, I need to hide the cancel and save button of the datatable, this can be done by set the suppressBottomBar to true. But I also need to leave the inline edit function avaliable, so I need to retrieve the draft values manually. By clicking the default "Save" button, I can get the draft values by "event.getParam('deaftValues')", but in this case, there is no such event with the Param. I've tried component.find('datatableAuraId').get("v.draftValues") / component.get('datatableAuraId').draftValues but failed. Have any idea?

addtion: I console.log(component.find('datatableAuraId').get("v.draftValues")) and in my console I got []as a result. the step is

  1. click the pencil icon to active the edit cell mode
  2. make some edition
  3. click the test button, to see if the console log get any data.
  4. I got '[]' as the result.

addition2: I get the draftValues, it seems that although I edit the line data, the edit data will not set the draftValues in sync, it will always be [].

CMP:

<lightning:button label="test" onclick="{!c.testclick}" />
<lightning:datatable aura:id="calendarDataTable" data="{! v.orderCalendar }"
 columns="{! v.Columns }" keyField="Id" draftValues="{! v.DraftValues }" 
                 hideCheckboxColumn="false" onsave="{! c.handleSaveEdition }" 
                 onrowselection="{!c.rowselection}" columnWidthsMode="fixed"
                 title="testTitile"/>

JS:

testclick: function(component, event, helper) {
    console.log("console");
    console.log(JSON.stringify(component.find('calendarDataTable').get('v.draftValues')));
    console.log(JSON.stringify(component.get('v.DraftValues')));
},

When I make some inline changes and click test button, the logs are always '[]'

  • component.find('datatableAuraId').get("v.draftValues") does work can you check if you are using the correct aura id of datatable? When you 'failed', are you getting any error? – rahul gawale Jul 16 '20 at 4:01
  • rahul thank you for your comment, I tried again but receive only [] as the draftValues. – Lanjinest Jul 16 '20 at 6:00
  • If you make some changes using inline edit, only those changes are available in the draftValues. Not all the data on the datatable. First, edit some data and try again. – rahul gawale Jul 16 '20 at 7:13
  • I edit some data and click my test button, it logs '[]' as always, no matter I edit or not. It seems that the changes I made are not setted to the draftValues attribute. – Lanjinest Jul 16 '20 at 7:21
0

I figured it out.

To those who want to achieve this requirement:

add a oncellchange = "{!c.handlecellchange}" attribute to your datatable. This method will be called every time you inline-edit your datatable.

add a <aura:attribute name="draftValueMap" type="Map" default="{}"/> in your component. This attribute is used to save all of your inline-edit values.

First of all, the cellchange event will return you the draftValue Object, but it contains only the value of the cell you just edit.

For example, if I change the value of DT_SALES_FIXED__c, I can get the draftValue by event.getParam("draftValues")(In the handlecellchange function). The draftValues will be

{"Id":"a2J0p0000002aNLEAY","DT_SALES_FIXED__c":"2020-07-31"}

Now you can use the draftValueMap to save the edit value. This can be done in many ways so I will not give a specific way here. (In addition, the 'Map' type aura:attribute can't be binded by a JS Map object. Check the answer here if you meet this problem)

After editing the datatable, you get all of your draftValues in draftValueMap, you can save it on the severside(same as the default onsave function)

Hope this answer will help you out.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.