1

I have a situation where I need to show Save and Cancel buttons on lightning datatable (inline edit) always. However, unless I edit some field the Save button will not appear. I am displaying the records which are not created yet and letting User to change the values. If the User does not want to change he may just check the checkbox and should be able to Save. But the button does not appear. I could not find anything in the documentation. Is there any way to achieve this?

Here is the lightning datatable I am using.

        <lightning:card title="New Recs">
        <lightning:datatable
                             aura:id="newRecsDataTable"
                             columns="{! v.columns }"
                             data="{! v.dataNew }"
                             keyField="Id"
                             errors="{! v.errors }"
                             draftValues="{! v.draftValues }"
                             onsave ="{!c.onSave}"
                             selectedRows="{! v.selectedRecords }" 
                             onrowaction="{! c.handleRowAction }" />
    </lightning:card>   </aura:if>

    component.set('v.columns', [
        {label: 'Name', fieldName: 'Milestone_Name__c', editable:'false', type: 'text'},
        {label: 'Status', fieldName: 'Status__c', editable:'true', type: 'picklist'},
        {label: 'Start Date', fieldName: 'Start_Date__c', editable:'true', type: 'date'},
        {label: 'Close Date', fieldName: 'Close_Date__c', editable:'true', type: 'date'}
    ]); 
  • 1
    What have you tried so far? Please update Your question with those details. – sanket kumar Nov 4 '18 at 17:34
  • Shared it. If User just selects the checkbox and does not edit any values then he should be able to Save it as I am processing only the selected rows behind the scenes. @sanketkumar – Kanikala Nov 4 '18 at 17:44
1

Interesting question. I tried changing one of the values in the table programmatically, but that didn't do anything.

When a field is edited manually, an Aura event named getActivePanel is fired. I tried firing that manually, but that also didn't work.

enter image description here

The only other option I can think of is to set the DataTable's hideCheckboxColumn attribute to true. Use a wrapper class to add a checkbox column to the record data instead. When the checkbox is selected, that should register as a change, and cause the cancel & save buttons to display. Then, use your onsubmit handler to process the rows as needed.

  • I have not tried this as I sticked to html table. But this solution seems to work for me. Thank you! @Shane – Kanikala Nov 6 '18 at 19:20
2

Better solution is to set draftValues when you load the table. You can set all the rows in the table as the draftValues or you can specify individual records. Either way, the table will appear as if it has already been edited and the Save/Cancel buttons will appear.

For your example:

component.set("v.draftValues", component.get("v.dataNew "));

in your js controller

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.