Grid rendering multiple values at the same time after edit
Hi,
I have grid with a text and combo input, whenever I update any value, the new value renders besides the old value.
Below is my grid column config for the two columns demonstrated in the attached video -
[
{
text: "Actual - This Week",
id: "CAPACITY_CURRENT_ACTUAL",
field: "capacity.current.Capacity_Spent__c",
width: 200,
sum: "sum",
cellCls: this.isTableReadOnly ? "read-only-cell" : "editable-cell",
skipValidation: true,
htmlEncode : false,
renderer: ({value, record}) => {
const intensity = record.data.capacity.current?.Intensity__c;
return `
<div class="actual-capacity-cell ${intensity ? "" : "error-validation"} ">
<span>${value ? value : ""}</span>
${intensity ? "" : this.errorIconMarkup}
</div>
`;
},
summaryRenderer: ({sum}) => this.percentageSummaryRenderer(sum, this.isTableReadOnly),
finalizeCellEdit: async ({record, value}) => {
if (value > 100) {
return "Please enter a maximum of 100%";
}
// logic to make an async api call to save the data
// return true is success, else return false
},
{
text: "Project Intesity",
id: "Project_Intensity",
field: "capacity.current.Intensity__c",
mode : 'number',
editor: {
type: "combo",
items: ["Blank", "1", "2", "3", "4", "5"],
},
width: 200,
sum: "sum",
htmlEncode : false,
cellCls: this.isTableReadOnly ? "read-only-cell" : "editable-cell",
skipValidation: true,
renderer: ({value, record}) => {
const capacitySpent = record.data.capacity.current?.Capacity_Spent__c;
return `
<div class="project-intesity-cell ${capacitySpent ? "" : "error-validation"} ">
<span>${value ? value : ""}</span>
${capacitySpent ? "" : this.errorIconMarkup}
</div>
`;
},
finalizeCellEdit: async ({record, value}) => {
if(!record.data.capacity.current?.Capacity_Spent__c) {
return true;
}
// logic to make an async api call to save the data
// return true is success, else return false
}
}
];