This is a migrated thread and some comments may be shown as answers.

Add image inside of cell on spreadsheet

5 Answers 616 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 22 Jan 2020, 02:48 PM
Hi, 

I was wondering if there is a way to insert an image inside of a cell on a spreadsheet, I see there is a way to have an image float attached to a cell but I would prefer to have the image itself inside this cell. If this is not viable the floating image will suffice. 

What I am trying to achieve is onClick of a cell it mocks your insert image modal but I have not been able to find the source code of insert image other than the widget doc which doesn't tell me what the functions are doing rather just the arguments. The way I have the onClick working is with a cellEditor which creates the popup but even when passing a input type='file' uploader and passing this data to the cell I can't figure out how to actually show the image that its passing.

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 23 Jan 2020, 06:50 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Jason
Top achievements
Rank 1
answered on 23 Jan 2020, 02:32 PM

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.

0
Stefan
Telerik team
answered on 27 Jan 2020, 09:21 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Software
Top achievements
Rank 1
answered on 05 Feb 2020, 07:59 PM

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.

 

0
Stefan
Telerik team
answered on 06 Feb 2020, 06:29 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
General Discussions
Asked by
Jason
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Jason
Top achievements
Rank 1
Software
Top achievements
Rank 1
Share this question
or