Page 1 of 1

Grid rendering multiple values at the same time after edit

Posted: Fri Sep 20, 2024 12:44 pm
by kdapurkar

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
                }
            }
];

Re: Grid rendering multiple values at the same time after edit

Posted: Fri Sep 20, 2024 4:05 pm
by alex.l

Hi kdapurkar,

Are you able to reproduce this in our demo?
I do not see any errors in your code after visual review. I can't use this code fragment at runtime, I just tested in our demos that uses custom renderers and I do not see any problems.

Please attach runnable test case for review or apply required changes to one of our demos and share steps to repro.
Here is our "How to ask for help" guide: viewtopic.php?f=1&t=772

Small notes: