You need to sign in to do that
Don't have an account?

How do I update a field in the list Lightning component?
my code contains two lightning: datatable where I pass two lists respectively. The first list "prodList" I need to show the products in the first lightning: datatable the second checks my cart. Having said that I have a question, when I go to select a product in the table as seen in the picture, a popup appears with a lightning in it: input which I need to make the user enter the desired quantity of that product. My list contains an "Available Quantity" field, when I go to select a product and enter the quantity you want it makes me a check where I subtract the quantity chosen by the user from the "Available quantity", how do I update the list and automatically check the updated value in the Available Quantity?
CMP
Controller:
CMP
<!-- Create Datatable --> <aura:attribute type="Product2__c[]" name="prodList"/> <aura:attribute type="Product2__c[]" name="prodList2"/> <aura:attribute name="control" type="Boolean" default='false'/> <aura:attribute name="mycolumns" type="List"/> <aura:attribute name="Counter" type="Integer" default="0" /> <aura:handler name="init" value="{! this }" action="{! c.init }"/> <div class="container" style="height:250px ; padding:10px ; "> <lightning:datatable class="datatable1" data="{! v.prodList }" columns="{! v.mycolumns }" keyField="Id" showRowNumberColumn="true" editable="true" onrowselection="{! c.getSelectedProd }" /> </div> <!-- Create Popup --> <aura:attribute name="popup" type="Boolean" default="false"/> <aura:attribute name="quantity" type="Integer" default="0"/> <aura:attribute name="Name" type="String" default="Name"/> <aura:attribute name="AQuantity" type="Integer" default="0"/> <aura:attribute name="id" type="String" default="id"/> <aura:if isTrue="{!v.popup}"> <div> <section role="dialog" tabindex="-1" aria-label="Meaningful description of the modal content" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open"> <div class="slds-modal__container"> <header class="slds-modal__header"> <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick="{!c.closeBtn}"> <lightning:icon iconName="utility:close" size="small" variant="neutral"/> <span class="slds-assistive-text">Close</span> </button> <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">{!v.Name}</h2> </header> <div class="slds-modal__content slds-p-around_medium alignLeft" id="modal-content-id-1"> <lightning:card> <div > <lightning:layout> <lightning:layoutItem padding="around-small"> <div class="position"> <lightning:buttonIcon iconName="utility:add" alternativeText="Add" title="Add" onclick="{!c.increment}" variant="brand"/></div> </lightning:layoutItem> <lightning:layoutItem padding="around-small"> <lightning:input type="number" value="{!v.quantity}" name="ItemPrice" class="luigi" label="Quantity" step="1" aura:id="prova" /> </lightning:layoutItem> <lightning:layoutItem padding="around-small"> <lightning:buttonIcon iconName="utility:dash" alternativeText="Add" title="Add" onclick="{!c.decrement}" variant="brand"/> </lightning:layoutItem> </lightning:layout> </div> </lightning:card> </div> <footer class="slds-modal__footer"> <lightning:button label="Yes" variant="brand" class="slds-m-top--medium" onclick="{!c.yesBtn}"/> <lightning:button label="No" variant="brand" class="slds-m-top--medium" onclick="{!c.noBtn}"/> </footer> </div> </section> <div class="slds-backdrop slds-backdrop_open"></div> </div> </aura:if>
Controller:
clickBook: function (cmp, event, helper) { cmp.set('v.mycolumns', [ { label: 'Name Number', fieldName: 'Name'}, { label: 'Product Name', fieldName: 'Name__c', type: 'text'}, { label: 'Weight For Single Product', fieldName: 'WeightForSingleProduct__c', type: 'number'}, { label: 'Available Quantity', fieldName: 'AvailableQuantity__c', type: 'number'}, { label: 'Genre', fieldName: 'GenreBook__c', type: 'text'}, ]); helper.getData(cmp); }, getSelectedProd: function (component, event) { component.set("v.popup",true); var selectedRows = event.getParam('selectedRows'); console.log('selRows -> ' + JSON.stringify(selectedRows)); var selectedRowsIds = []; for(var i=0;i<selectedRows.length;i++){ selectedRowsIds.push(selectedRows[i].Id); component.set("v.AQuantity",selectedRows[i].AvailableQuantity__c); component.set("v.Name", selectedRows[i].Name__c); component.set("v.id", selectedRows[i].Id); } component.set( "v.prodList2", selectedRows ); var list = component.get("v.prodList2"); component.set('v.Counter', list.length); if(list.length==0){ component.set("v.control",false); } else{ console.log("Size = "+list.length); } }, handleClick : function (component, event, helper) { component.set( "v.control", true ); }, yesBtn : function(component,event,helper){ var qty=component.find("prova").get("v.value"); var name=component.get("v.Name"); var aquantity=component.get("v.AQuantity"); console.log("id book "+component.get("v.id")); if(qty>aquantity){ var toastEvent = $A.get("e.force:showToast"); toastEvent.setParams({ title : 'Error', message: 'the quantity you want exceeds that available', duration:' 5000', key: 'info_alt', type: 'Error', mode: 'pester' }); toastEvent.fire(); } else{ var rquantity=aquantity-qty; console.log("Available quantity - quantity = " +rquantity); //problem console.set("v.prodList[v.id].AvailableQuantity__c",rquantity); } var toastEvent = $A.get("e.force:showToast"); toastEvent.setParams({ title : 'Success', message: name+' added to cart quantity ='+quality, duration:' 5000', key: 'info_alt', type: 'success', mode: 'pester' }); toastEvent.fire(); component.set( "v.popup", false ); },
Refer the below example for inline editing lightning data table & Modify your code.
https://www.infallibletechie.com/2018/11/inline-editing-in-lightningdatatable-in.html
If this information helps, please mark it as best answer.
Thanks!!