Aura Component: get the draftValues of the datatable without click the Save button?

Question

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 '[]'

Answer 1

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.