We have observed some unexpected behavior with the React Spreadsheet component lately.
We are attempting to add signatures to the worksheet at the currently selected cell. We understand that this can be done by adding the image (which we gather from another component, and convert to data uri) to the shapes collection in the worksheet using the selected cell for the position.
The problem we are expericing is that adding more than one image to the worksheet inconsistently adds the new image. Some times it will insert as expected, other times it will place an image that is already defined at another location. It does does in a consistent, but odd stack like behavior.
For instance, if I add image A to B1, and try to add image C to D2, D2 may show image A instead of image C, additionally, deleting image A from B1 may then correctly show image C at D2. While other times, inserting a image elsewhere may work as expected. It is very odd.
I've included some sample code that we are using.
const insertSignature = () => { if (!spreadsheet?.current) { return; } // get our image as data, since worksheet image require a datastring const d = signature.current?.toDataURL();
const wi = new WorksheetImage(d); const s = spreadsheet.current; const c1 = s.activeWorksheet.getCell( `R${s.activeCell.row + 1}C${s.activeCell.column + 1}`, CellReferenceMode.R1C1 ); const c2 = s.activeWorksheet.getCell( `R${s.activeCell.row + 2}C${s.activeCell.column + 2}`, CellReferenceMode.R1C1 ); wi.topLeftCornerCell = c1; wi.bottomRightCornerCell = c2;
// need to find the shape at the current location, if it exists, to clear it out const shapes = s.activeWorksheet.shapes(); for (let i = 0; i < shapes.count; i++) { const shape = shapes.item(i); if ( shape.topLeftCornerCell.equals(c1) && shape.bottomRightCornerCell.equals(c2) ) { shapes.remove(shape); break; } }
shapes.add(wi); };
Hi Andrew, is there any more information on this issue?
Hello Scott & Corey,
My apologies for the delay in response.
I have checked on development issue 274139, and at the time of writing this, it unfortunately has not yet received any attention from our development teams. We are currently in the midst of a new release and are “code-frozen,” so this will not be prioritized until after the upcoming release, but I will see about getting it escalated for you if it is holding up your current release date.
Please let me know if you have any other questions or concerns on this matter.
Hi Andrew, I am taking this case over on behalf Corey. Has their been any progress on resolving this? It is holding our release date up. Let me know if you need the license number. Thank you.
Thanks, its been a couple of weeks, is there an update on this issue?
Hello Corey,
I have downloaded the sample project that you have provided on GitHub along with the YouTube video that you have provided with it, and in doing so, I have reproduced the behavior you are seeing. As an extra check, I have implemented the following function within the sample:
function download(url, filename) { fetch(url) .then(response => response.blob()) .then(blob => { const link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.download = filename; link.click(); }) .catch(console.error); }
The above will download the image, and in doing so, I am able to verify that the image coming from the signature is correct and it is not duplicating images. This seems to point at the issue being within the rendering mechanisms of the IgrSpreadsheet.
This behavior is unexpected, and as such, I have asked our engineering teams to examine the behavior further. To ensure it receives attention, I have logged it in our internal tracking systems with a development ID of 274139. The next step will be for a developer to investigate further and offer a fix or other resolution. I will be linking this issue to a private support case so that you can be notified when a resolution is made. This support case has an ID of C-00223866 and you can access it after signing into your account, here: https://account.infragistics.com/support-cases. You can continue to send updates to the case or this forum thread at any time.