You need to sign in to do that
Don't have an account?
Juan García
Not visible columns of lightning datatable
Hi Devs,
I have some problems with a component that is going to be using a <lightning:datatable /> object.
There are data not visible, and the ddbb this values are filled. This values not load in the table.
Name is ok, the table can be editabled, and the sort works, but values not load (the fields are number, 16 with 2decimals). If I click on the column, show the value, but if I dont click, the value not is shown)
Thanks
Component:
I have some problems with a component that is going to be using a <lightning:datatable /> object.
There are data not visible, and the ddbb this values are filled. This values not load in the table.
Name is ok, the table can be editabled, and the sort works, but values not load (the fields are number, 16 with 2decimals). If I click on the column, show the value, but if I dont click, the value not is shown)
Thanks
Component:
<aura:component controller="TCK_DesglCoste_ByOpp_Ctr" implements="force:hasRecordId,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,lightning:actionOverride,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:appHostable" access="global" > <!-- handlers--> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <aura:handler event="force:refreshView" action="{!c.doInit}" /> <!-- attributes --> <aura:attribute name="columnsDesglose" type="List"/> <aura:attribute name="desgloseCosteList" type="Desglose_Coste__c[]"/> <aura:attribute name="sortedBy" type="String" default="Name"/> <aura:attribute name="sortedDirection" type="String" default="asc"/> <div class="slds-page-header"> <div class="slds-grid"> <div class="slds-col slds-has-flexi-truncate"> <div class="slds-media slds-no-space slds-grow"> <div class="slds-media__figure"> <lightning:icon iconName="custom:custom105" size="large" alternativeText="Indicates approval"/> </div> <div class="slds-media__body"> <p class="slds-text-title_caps slds-line-height_reset">Object</p> <h1 class="slds-page-header__title slds-m-right_small slds-align-middle slds-truncate" title="My Contacts">My object</h1> </div> </div> </div> </div> </div> <lightning:datatable aura:id="desgloseCosteDataTable" columns="{! v.columnsDesglose }" data="{! v.desgloseCosteList }" keyField="Id" hideCheckboxColumn="true" onsort="{!c.updateColumnSorting}" sortedBy="{!v.sortedBy}" sortedDirection="{!v.sortedDirection}" onsave ="{!c.onSave}" onrowaction="{! c.handleRowAction }" /> </aura:component>Controller, helper and CTR
Controler: ({ doInit : function(cmp, event, helper) { cmp.set('v.columnsDesglose', [ {label: 'Name', fieldName: 'Name', type: 'text', sortable: true, editable:'true'}, {label: 'Month 1', fieldName: 'Mes_1__c', type: 'double', sortable: true, editable:'true'}, {label: 'Month 2', fieldName: 'Mes_2__c', type: 'double', sortable: true, editable:'true'}, {label: 'Month 3', fieldName: 'Mes_3__c', type: 'double', sortable: true, editable:'true'}, {label: 'Month 4', fieldName: 'Mes_4__c', type: 'double', sortable: true, editable:'true'}, {label: 'Month 5', fieldName: 'Mes_5__c', type: 'double', sortable: true, editable:'true'}, ]); helper.loadDesglose(cmp, helper); }, updateColumnSorting : function (cmp, event, helper) { var fieldName = event.getParam('fieldName'); var sortDirection = event.getParam('sortDirection'); cmp.set("v.sortedBy", fieldName); cmp.set("v.sortedDirection", sortDirection); helper.sortData(cmp, fieldName, sortDirection); }, onSave : function (component, event, helper) { helper.saveDataTable(component, event, helper); }, }) __________ helper: ({ loadDesglose : function(cmp, helper) { var action = cmp.get("c.getAllDesgloseCoste"); action.setParams({opportunityId: cmp.get('v.recordId')}); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { cmp.set("v.desgloseCosteList", response.getReturnValue()); helper.sortData(cmp, cmp.get("v.sortedBy"), cmp.get("v.sortedDirection")); } }); $A.enqueueAction(action); }, sortData: function (cmp, fieldName, sortDirection) { var data = cmp.get("v.desgloseCosteList"); var reverse = sortDirection !== 'asc'; data.sort(this.sortBy(fieldName, reverse)) cmp.set("v.desgloseCosteList", data); }, sortBy: function (field, reverse, primer) { var key = primer ? function(x) {return primer(x[field])} : function(x) {return x[field]}; reverse = !reverse ? 1 : -1; return function (a, b) { return a = key(a), b = key(b), reverse * ((a > b) - (b > a)); } }, saveDataTable : function(component, event, helper) { var editedRecords = component.find("desgloseCosteDataTable").get("v.draftValues"); var totalRecordEdited = editedRecords.length; var action = component.get("c.updateDesgloseCoste"); action.setParams({ 'editedDesglCosteList' : editedRecords }); action.setCallback(this,function(response) { var state = response.getState(); if (state === "SUCCESS") { //if update is successful if(response.getReturnValue() === true){ helper.showToast({ "title": "Record Update", "type": "success", "message": totalRecordEdited+" Registros actualizados" }); helper.reloadDataTable(); } else{ //if update got failed helper.showToast({ "title": "Error!!", "type": "error", "message": "Error en la actualización" }); } } }); $A.enqueueAction(action); }, /* * Show toast with provided params * */ showToast : function(params){ var toastEvent = $A.get("e.force:showToast"); if(toastEvent){ toastEvent.setParams(params); toastEvent.fire(); } else{ alert(params.message); } }, /* * reload data table * */ reloadDataTable : function(){ var refreshEvent = $A.get("e.force:refreshView"); if(refreshEvent){ refreshEvent.fire(); } }, }) __________ CTR: @AuraEnabled public static list<Desglose_Coste__c> getAllDesgloseCoste(Id opportunityId){ return [SELECT Name, Mes_1__c, Mes_2__c, Mes_3__c, Mes_4__c, Mes_5__c, Mes_6__c, Mes_7__c, Mes_8__c, Mes_9__c, Mes_10__c, Mes_11__c, Mes_12__c, Opportunity__c, Opportunity__r.Name, LastModifiedById FROM Desglose_Coste__c WHERE Opportunity__c =:opportunityId]; } @AuraEnabled public static boolean updateDesgloseCoste(List<Desglose_Coste__c> editedDesglCosteList){ try{ system.debug('Total de registros: ' + editedDesglCosteList); update editedDesglCosteList; return true; } catch(Exception e){ return false; } }
All Answers
If I click on a filled value (but not loaded in the table), this value is shown.