Add image inside of cell on spreadsheet

Hello, Jason,

Thank you for the detailed explanation.

Could you please share how the onClick event is attached to the cell as there is no built-in onClick event inside the Spreadsheet?

https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet#events

In general, I can suggest if the cell element is available on the event to append a child dom element(the image) inside the cell that was clicked.

Regards,
Stefan
Progress Telerik

Thank you again for replying so fast.

On the spreadsheet component the prop select checks the selected cell and when this cell has an editor sender.view.openCustomEditor() is called and this will open the editor of the cell on click. So what my goal currently is to have the same setup you have on insert image on a cell with editor of "image"(spreadsheet top tool bar).

Inside this editor a pop up with a file uploader that passes that given info onto the cell and adds the image to that cell. I have looked into your docs about image but have not been able to find the source code of this "Insert Image" (https://demos.telerik.com/kendo-ui/spreadsheet/images) 

If possible could you please provide how that "Insert Image" button is working on the selected cell or a way I can use this input type='file' (uploader) return value to insert an actual image inside of the cell with a dojo example.

Hello, Jason,

Is it possible to share an example of what is already in place, as this will help us to provide more to the point example?

In general, this will require additional custom code, this is why it will be better to try to align it with the current state of the real application.

Regards,
Stefan
Progress Telerik

Sorry for the late response.. 

I have figured out how to add the drawing linked to the cell and make the drawing match the cell size to appear inside the cell but now I have an issue where because the drawing is in front of the cell I have to move my image so I can click the cell to pop up the editor to upload a new image

Is there a way to..
1-Freeze/ disable movement of this image so the user cant move it at all(disable events of that drawing)
2-Add an onClick method to the drawing itself or if not viable move this drawing behind the cell (tried z-index with no luck)

a quick layout of my process on this is as following
-Set cell data, based off cell data create image object with to get height/width of image to assign to cell 
-Once create and add a Drawing for this image linked to the cell on the sheet
-Image displays where needed but is covering the cell disallowing cell click unless the image is manually moved off the cell
-Clicking the cell after moving the image bring up the editor which sets that image value

Thank you for the support you have provided and again sorry I was late on responding.

Hello,

Thank you for the additional details.

Regarding the questions:

1) The image dragging can be disabled by preventing its mousedown event. This has to be done on the render event of the Spreadsheet:

https://stackblitz.com/edit/kendo-react-spreadsheet-196vav?file=app/main.js

2) This is tricky as based on the first requirement we have to disable the events, so disabling them and still allowing click contradicts between each other. May be if possible, create the image smaller then the cell, so there is still space for the user to click over.

Also, is Excel or Google Spreadsheet have similar functionality, so we have a better idea of it?

Regards,
Stefan
Progress Telerik