Inline editing is not working in lightning datable (AURA Component)

Question

I'm trying to create a datatable with some features like the inline edit. I've followed the documentation for creating this table, but the "handleSave" action is not working. Here's my code:

Component:

<aura:component description="Manage Task" controller="ManageTaskController"
            implements="flexipage:availableForAllPageTypes,force:lightningQuickActionWithoutHeader,lightning:isUrlAddressable,lightning:hasPageReference,force:hasRecordId">
<!-- UI Controlling Attributes -->
<aura:attribute access="private" name="showErrorMessage" type="Boolean" default="false"/>
<aura:attribute name="isModalDisplayed" type="Boolean" default="false"/>
<aura:attribute name="recordId" type="Id"/>
<aura:attribute name="data" type="Object"/>
<aura:attribute name="draftValues" type="Object" default="[]"/>
<aura:attribute name="columns" type="Object"/>
<aura:attribute name="filter" type="String" />
<aura:attribute name="errors" type="Object" default="[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:html tag="style">
    .slds-modal__title{
    font-size: 30px !important;
    }
    .slds-modal__container {
    width : 95% !important;
    max-width : 100% !important;
    }
    .myModal{
    height: 85%;
    }
    .offerIdDiv{
    padding-top: 30px;
    }
    .offerLinkDiv{
    padding-bottom: 10px;
    }
    .button{
    margin-top: 15px;
    }
    .myIcon{
    padding-top: 30px;
    }
    #modalContDiv{
    font-size: 16px;
    }
</aura:html>
<!-- Error Message -->
<aura:if isTrue="{!v.showErrorMessage}">Errore</aura:if>
<!-- Component Modal -->
<lightning:button class="slds-align_absolute-center button" variant="brand" label="Manage Task" title="Manage Task"
                  onclick="{! c.openModal }"/>
<aura:if isTrue="{!v.isModalDisplayed}">
    <div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox"
         class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <header class="slds-modal__header">
                <!--{!v.recordId}-->
                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-brand" title="Close"
                        onclick="{!c.closeModal}">
                    <lightning:icon iconName="utility:close" size="small" variant="inverse"
                                    alternativeText="Close"/>
                    <span class="slds-assistive-text">Close</span>
                </button>
                <div class="slds-col slds-size_2-of-3 slds-align_absolute-center">
                        <span>
                            <h1 id="modal-heading-01" class="slds-modal__title">Manage Task</h1>
                        </span>
                </div>
            </header>
            <div id="modalContDiv" class="slds-modal__content slds-p-around__medium no_scrollbar myModal">
                <lightning:input type="text" onchange="{!c.filter}" value="{!v.filter}" label="Filter" />
                <div>
                    <lightning:datatable aura:id="taskTable"
                                keyField="Id"
                                data ="{!v.data}"
                                columns = "{!v.columns}"
                                hideCheckboxColumn="false"
                                onrowselection="{!c.doSelectRecord}"
                                onrowaction = "{!c.handleRowAction}"
                                draftValues = "{!v.draftValues}"
                                onsave = "{!c.handleSave}"
                    />
                </div>
            </div>
        </div>
    </div>
    <div class="slds-backdrop slds-backdrop__open" aura:id="Modalbackdrop"></div>
</aura:if>

</aura:component>

JS Controller:

({
    doInit : function(component, event, helper) {
        var actions = [{
            label: 'Show Details',
            name:  'show_details',
            iconName: 'action:preview'
            },
            {
                label: 'Delete',
                name: 'delete',
                iconName: 'action:delete'
        }]
        component.set('v.columns',[
            {label: 'Subject', fieldName: 'Subject', type: 'text'},
            {label: 'Case Number', fieldName: 'CaseNumber', type: 'text'},
            {label: 'Status', fieldName: 'Status', type: 'text'},
            {label: 'Created Date', fieldName: 'CreatedDate', type: 'datetime'},
            {label: 'Supervisor', fieldName: 'Supervisor__r', type: 'text'},
            {label: 'Priority', fieldName: 'Priority', type: 'text', editable: true},
            {label: 'Level', fieldName: 'Level__c', type: 'text', editable: true},
            {label: 'Calcola Supervisore', fieldName: 'Calcola_Supervisore__c', type: 'checkbox', editable: true},
            {type: 'action', typeAttributes:{ rowActions : actions}}
        ])
       helper.getData(component, event, helper);
   },

   doSelectRecord : function(component, event, helper) {
       var selectedRows = event.getParam('selectedRows');
       console.log('selectedRows', selectedRows);
   },

   handleRowAction : function(component, event, helper){
       var action = event.getParam('action');
       var row = event.getParam('row');
       switch(action.name){
           case 'show_details' :
                alert('Case ID: ' + row.Id + ' \nCase Number: ' + row.CaseNumber + '\nCase Subject: ' + row.Subject + '\nCase Status: ' + row.Status +
                '\nCreated on: ' + row.CreatedDate + '\nGot Supervisor?' + row.Calcola_Supervisore__c + '\nThe Supervisor is: ' + row.Supervisor__r +
                 '\nCase Priority: ' + row.Priority + '\nCase Level: ' + row.Level__c);
                break;
           case 'delete' :
                var data = component.get('v.data');
                var index = data.indexOf(row);
                data.splice(index, 1);
                component.set('v.data', data);
                break;
       }
   },

 handleSave : function(component, event, helper){
     var draftValues = event.getParam('draftValues');
     var action = component.get("c.updateRelatedCaseList");
     action.setParams({"CaseList" : draftValues});
     action.setCallback(this, function(response){
         var state = response.getState();
         if(state === 'SUCCESS'){
             component.set('v.draftValues', []);
             helper.getData(component, helper);
             $A.get('e.force:refreshView').fire();
         }
     });
     $A.enqueueAction(action);
 }

    closeModal: function(component,event,helper){
        component.set("v.isModalDisplayed", false);
    },

    openModal: function(component,event,helper) {
        component.set("v.isModalDisplayed", true);
        helper.manageCaseLogic(component);
    },

})

JS Helper:

({
 toastMsg : function( strType, strMessage ) {
        var showToast = $A.get( "e.force:showToast" );
        showToast.setParams({
            message : strMessage,
            type : strType,
            mode : 'sticky'
        });
        showToast.fire();
    },

 getData : function(component, event, helper){
      var action = component.get('c.fetchCases');
     action.setCallback(this, function(response){
         var state = response.getState();
         if(state === 'SUCCESS' || state === 'DRAFT'){
             var responseValue = response.getReturnValue();
             console.log('responseValue', responseValue);
             component.set('v.data', responseValue);
         }
     });
     $A.enqueueAction(action);
 }

})

Apex Controller:

public with sharing class ManageTaskController {
@AuraEnabled
public static void updateRelatedCaseList(List<Case> CaseList) {
    if (CaseList != null && CaseList.size() > 0) {
        update CaseList;
    }
}
@AuraEnabled
public static List<Case> fetchCases() {
    try{
        return [SELECT CaseNumber, Level__c, Calcola_Supervisore__c, Supervisor__r.Name, Subject, Status, Priority, CreatedDate FROM Case];
    } catch(Exception e){
        //this allows lightning components to see the exception message
        System.AuraHandledException err = new System.AuraHandledException(e.getMessage());
        //this makes it so the exception is still readable in the debug logs
        err.setMessage(e.getMessage());
        throw err;
    }
}
@AuraEnabled
public static List<Case> findByName(String searchKey) {
    String name =  + searchKey + '%';
        return [SELECT CaseNumber, Level__c, Calcola_Supervisore__c, Supervisor__r.Name, Subject, Status, Priority, CreatedDate
        FROM Case
        WHERE Priority LIKE :name OR Supervisor__r.Name LIKE :name OR Level__c LIKE :name
        ];
    }

}

Can someone help me understand where I am wrong? Thanks in advance.

Answer 1

Nothing jumps right out to me. I would start with ensuring I have ways to report issues to the console.

Try changing your Apex Class for updating cases to include a try/catch block that throws an AuraHandledException response to the client dev console to see if you get a meaningful error. I would also add some console logging to the handleSave method to capture the response and parse out any errors.

Apex Class

public static void updateDraftValues(List<Case> draftValues)
{
    if(!draftValues.isEmpty())
    {
        try
        {
            update draftValues;
        }
        catch(Exception ex)
        {
            throw new AuraHandledException('Something went wrong...' + '\n' + 
                                            'Message: ' + ex.getMessage() + '\n' + 
                                            'Type: ' + ex.getTypeName() + '\n' +
                                            'Cause: ' + ex.getCause() + '\n' + 
                                            'Trace: ' + ex.getStackTraceString());
        }
    }
}

Add this to your handleSave method in the component controller

else if(state === 'ERROR'){
                var errors = response.getError();
                component.set('v.errors',errors);
                if(errors){
                    if(errors[0] && errors[0].message){
                        console.log('ERROR: ' + errors[0].message);
                    } else{
                        console.log('ERROR: Unknown ' + response.getError());
                    }
                } else{
                    console.log('Something went wrong.  Please try again');
                }