We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

insert Image using SpreadsheetComponent object working once only

Hello Folks,

I'm on Angular 13, using @syncfusion/ej2-angular-spreadsheet v 20.2.43. I'm trying to insert icons on my spreadsheet using insertImage(images: ImageModel[], range?: string): void; SpreadsheetComponent method;

ImageModel[]; specifies the options to insert image in spreadsheet (src path,height,width,id.....)

range; specifies the range in spreadsheet (address)

My insertImage method is called inside an async method m1. The first time I called m1, insertImage works as expected, I can see the icon on my spreadsheet cell address (example: this.spreadsheetObj.insertImage([imageModel],address);), but, when I recall my async method m1 again, no cell being updated.

PS: weirdo case is : when I call insertImage twice, next to each other, one after the other , I can see a diffrence , the icon is on the cell, but being focused (red tag on it for each movement in the spreadsheet table), that's why I did suggest to exit the async method and call it again to have the same case as my first cell (the first icon is not being focused by the red tag)

Does the async method break something on spreadsheet insertImage method ?

Any thoughts !


3 Replies

VR Vasanth Ravi Syncfusion Team November 17, 2022 07:45 AM

Hi,


We have checked your issue by creating a sample in both the mentioned and latest versions with a button click event for inserting an image into the sheet. It works as expected. Hereby, attaching the sample for your reference.

Sample Link: https://stackblitz.com/edit/angular-phrtgz?file=app.component.ts


We also recommend that you update to the latest Syncfusion packages to avail of the latest fixes and updates.

 
https://www.npmjs.com/package/@syncfusion/ej2-angular-spreadsheet


If still the issue persists, kindly replicate the issue in the above attached sample and also share the replicable video demonstration to proceed further.





HE HEI November 24, 2022 04:33 AM

Hello @Vasanth Ravi, 

Thank you for your quick response. Inserting images working as expected on your attached example, but regarding my issue I did found that refreshing the spreadsheet using "spreadsheetObj.refresh(false);" which did broke my inserts for the second try. I did remove this "suggested broken instruction" and update the necessary changes to successed the insert for any case, actually, we did get the expected results, but sometimes we need spreadsheet refresh to update data and cells styling after image inserts. 

Kindly suggest if any changes are required for refreshing the spreadsheet.

PS: Find attached my stackblitz example (this example : is working on inserting Image while popover (clicking) the corresponding cell)

https://stackblitz.com/edit/angular-phrtgz-m93aha?file=app.component.ts,app.component.html




VR Vasanth Ravi Syncfusion Team November 28, 2022 11:25 AM

Hi Hei,


While checking with the sample provided, we noticed that you had made a condition for checking whether the image is present on the cell or not. Then, you have been making the source null and calling the refresh method. We need clarification regarding the condition you have made.

 

  1. Whether you were trying to delete the image if present on the cell selected

  2. Whether you need any customization on the condition quoted

  3. Why did you call the refresh method once after inserting the image?After inserting the image, the UI gets refreshed automatically.

Please do mention your need and the issue you were facing in detail, and also, share the video demonstration of the issue to validate it further and provide a better solution.


Loader.
Live Chat Icon For mobile
Up arrow icon