Our blazing fast Grid component built with pure JavaScript


Post 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
                }
            }
];
Attachments
2024-09-20_16-01-38.mp4
(826.77 KiB) Downloaded 9 times

Post 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:

All the best,
Alex


Post Reply