Editable cell images

TreeGrid documentation

Insert image

Since 15.0 the image files can be inserted directly to the cell values in types EHtml, Auto, Img and Icon and also to grid as floating image in Img attribute.
Not available in Internet Explorer 9 and older!
If and how can be images inserted to grid in Img attribute and into text in types EHtml, Auto, Img and Icon.
The images are inserted into the cells as data urls and can be uploaded to server.
Comma separated list of flags:
drop - If set, images can be dropped to the cell.
open - If set, images can be placed to the cell by choosing the image(s) from file dialog.
text - If set, images can be inserted into text in edited cell, into cursor position, the image will be a part of the text. Only for EHtml and Auto types.
add - If set, images can be inserted into text in not edited cell, to the end of the text, the image will be a part of the text. Only for EHtml and Auto types.
replace - If set, images can be inserted into text in not edited cell, the image replaces the current content, the image will be a part of the text.
float - If set, images can be inserted to cell, the image will be inserted into Img attribute and will be floating behind text.
readonly - If set, the add and replace flags are applicable also for not editable cells.
more - If set, more images can be chosen in the file dialog and inserted to the cell. Only for EHtml and Auto types.
rowspan - If set, the cell is spanned vertically to other rows to show the text image without changing the row height.
colspan - If set, the cell is spanned horizontally to other columns to show the text image fully.
Maximal width of the inserted image in pixels. The image can be more resized when editing. Maximal height of the inserted image in pixels. The image can be more resized when editing. Called after image(s) is opened or dropped to cell, but before the cell value is modified.
images is array of DOM IMG elements to be added to the cell value. If the cell is type Img or Icon, only the first image will be added to the cell.
The IMG elements are added to the EHtml and Auto type cell as outerHTML, to the Img and Icon cell types only as src attribute value.
drop is set, if the image was dropped to cell. It is not set, if the image was opened by system file dialog.
action is planned action, 1 - add floating image(s) to Img attribute, 2 add image(s) to the cell value, 3 set (replace) image(s) to the cell value.
Return new action or 0 to cancel the action.
Called before dialog for inserting image is displayed for given cell. It is not called on drop file, for this case use OnDropFile instead.
test is set if only testing possibility to insert image in the cell.
Return true to cancel the opening.
Or return array as [row,col,insertimg] to insert the image to another cell. If set insertimg, it is used instead of InsertImg when testing opening permissions.
Displays system dialog to open local image file and insert it to the actual or focused cell of type EHtml, Auto, Img and Icon or as floating image into Img attribute.
The way of inserting is chosen by InsertImg.
The images are inserted into the cells or to Img attribute as data urls and can be uploaded to server.
If files can be dropped to the grid.
If set, dropping of any unsupported file to the grid will cancel default browser action for this file drop.
It must be set to permit dropping xlsx files for import, image files to EHtml, Auto, Img and Icon types and to Img attribute and other files to File type.
Called when a user dropped any file to grid, to given cell. The row and col can be also null.
files is list of the dropped files as dataTransfer.files.
Return true to cancel the drop.
Since 16.1 return array as [row,col,insertimg] to drop the file to another cell. If set insertimg, it is used instead of InsertImg when testing dropping permissions.
Called when a user dropped any file to grid, to given cell and the file was not processed by TreeGrid.
files is list of the dropped files as dataTransfer.files.

Edit image

Since 15.0 the image files can be edited inside cell in types EHtml and Auto and as floating images set by Img attribute.
Not available in Internet Explorer 9 and older!
Floating images assigned to the cell. The images are not related to the cell value, their position is just fixed to the cell.
The floating images are moved with the cell row and column. They are deleted if the cell row or column is deleted. They are not copied with the cell or row or column.
First character separated array as url1,parameters1,url2,parameters2,....
The url is usually data url containing the image data, but can be also standard reference to external image.
The parameters are comma separated values as x,y,width,height,rotate,opacity,name,cx,cy,cwidth,cheight.
x, y is position relative to the cell top left corner, in pixels. They can be relative to bottom right corner if start by "(", e.g. "(10,(20" or to center if start by "!", e.g. "!10,!20".
width, height is final image size in pixels.
rotate is image rotation clockwise in degrees.
opacity is image opacity from 0 as fully transparent to 1 fully opaque.
name is image name, shown as tooltip on mouse hover, need not be unique.
cx, cy is left top corner inside image to crop the image from this position. If set, the x and y is position of the cropped top left corner.
cwidth, cheight is width and height of the crop area in the image. The width and height is always size of the whole image.
For example "|data:Image/png;base64,JsdfSDFDSFLKasdh....|0,0,100,50,90|Test.svg|10,10,50,40,0,0.4,test".
The Img is also uploaded to server with cell and exported to xlsx.
If and how can be edited floating images defined by Img attribute. Comma separated list of case insensitive flags:
Move - If set, floating images can be moved by mouse dragging.
Shift - If set, text images can be moved inside cell by mouse dragging.
Resize - If set, images can be resized by mouse dragging.
ResizeRatio - If set instead of Resize, images can be resized by mouse dragging, but only actions preserving aspect ratio.
Rotate - If set, images can be rotated by mouse dragging.
Delete - If set, floating images can be deleted by DeleteImage action. Text images can be deleted always.
Copy - If set, images can be copied by CopyImage and DuplicateImage and action.
Crop - If set, floating images can be cropped by mouse dragging.
Assign - If set, automatically moves the floating image to another cell after moved, resized or rotated to be the cell always top left corner.
Opacity - If set, permits changing image opacity by EnterImageOpacity action.
Float - If set, permits changing image from floating to text and vice versa.
Name - If set, permits changing image name by action EnterImageName.
By which corner or center the floating images will be assigned to the cell, two keywords, case insensitive.
Left or Center or Right - horizontal assignment.
Top or Middle or Bottom - vertical assignment.
The image is moved, copied and deleted with the assigned cell.
An action done when dragging text image edited in EHtml / Auto type cell and floating image in Img attribute. Case insensitive.
Can contain more actions comma separated, it is used the first one permitted by EditImg.
The available actions:
Move - move the floating image,
MoveXY - move the floating image in one direction,
Copy - copy the floating image and move it,
CopyXY - copy the floating image and move it in one direction,
Shift - move the text image inside cell,
Resize - resize the image width and height, preserve aspect ratio,
ResizeXY - resize the image width or height,
ResizeFree - resize the image width and height, ignore aspect ratio,
Rotate - rotate the image 0 - 360 degrees.
Crop - crop the floating image from the nearest direction to the mouse cursor. Text images cannot be cropped.
There are also attributes with suffix for every combination of control keys and mouse buttons in this order: Shift,Ctrl,Alt,Meta,Left,Middle,Right. For example DragImgCtrlRight will be read if dragged by right mouse button and pressed Ctrl.
Default values are: DragImg="Move,Shift,Resize,Rotate" DragImgCtrl="Copy,Shift" DragImgCtrlRight="Rotate" DragImgShift="Resize" DragImgShiftRight="Crop".
Minimal width of image when resizing or cropping it.
Minimal height of image when resizing or cropping it.
Controls text images in EHtml and Auto types, bit array.
1. bit &1 - If set, images are restricted in the cell when editing.
2. bit &2 - If set, only images are permitted in the cell when editing.
3. bit &4 - If set, the high image can be cut, if not set, images control text height, higher images increase line height.
Moves, copies, resizes or rotates actual floating image under mouse cursor.
The action is chosen according to the DragImg setting or by action chosen by DragImage... action.
Moves actual floating image under mouse cursor.
Moves actual floating image under mouse cursor, only in one direction.
Copies and moves the copy of the actual floating image under mouse cursor.
Copies and moves the copy of the actual floating image under mouse cursor. Moves only in one direction.
Resizes actual floating image under mouse cursor. Preserves aspect ratio.
Resizes actual floating image under mouse cursor. Resize only width or height. Does not preserve aspect ratio.
Resizes actual floating image under mouse cursor. Does not preserve aspect ratio.
Rotates actual floating image under mouse cursor.
Crops actual floating image from the nearest edge to the mouse cursor.
Sets default dragging action of selected image in edited EHtml / Auto type cell and floating image in Img attribute to "Resize".
If image is dragged without any control button, it is resized, preserves aspect ratio. Sets default dragging action of selected image in edited EHtml / Auto type cell and floating image in Img attribute to "ResizeXY".
If image is dragged without any control button, it is resized in one direction. Sets default dragging action of selected image in edited EHtml / Auto type cell and floating image in Img attribute to "ResizeFree".
If image is dragged without any control button, it is resized, ignores aspect ratio. Sets default dragging action of selected image in edited EHtml / Auto type cell and floating image in Img attribute to "Rotate".
If image is dragged without any control button, it is rotated. Sets default dragging action of floating image in Img attribute to "Crop".
If image is dragged without any control button, it is cropped from the nearest edge to the mouse cursor.
Text images cannot be cropped.
Sets default dragging action of selected image in edited EHtml/Auto type cell to "Shift" and floating image in Img attribute to "Move".
If image is dragged without any control button, it is moved. Sets default dragging action of selected image in edited EHtml/Auto type cell to "Shift" and floating image in Img attribute to "MoveXY".
If image is dragged without any control button, it is moved in one direction. Sets default dragging action of selected image in edited EHtml/Auto type cell and floating image in Img attribute to "Copy".
If image is dragged without any control button, it is copied and moved. Sets default dragging action of selected image in edited EHtml/Auto type cell and floating image in Img attribute to "CopyXY".
If image is dragged without any control button, it is copied and moved in one direction. Sets default dragging action of selected image in edited EHtml/Auto type cell and floating image in Img attribute to "".
The image cannot be dragged without any control button. Clears default dragging action of selected image in edited EHtml / Auto cell and floating image in Img attribute.
If image is dragged without any control button, its action is chosen by DragImg attribute. Comma separated list of actions done when double clicked on image edited in EHtml / Auto type cell and by action RestoreImage. Case insensitive.
The available actions:
Size - shows the image in its default width and height.
Rotation - sets the image rotation to 0 degrees.
Position - restores defaut position of text image.
Left - moves floating image to the left edge of the cell.
Top - moves floating image to the top edge of the cell.
There are also attributes with suffix for every combination of control keys and mouse buttons in this order: Shift,Ctrl,Alt,Meta,Left,Middle,Right. For example RestoreImgCtrlRight will be read if double clicked by right mouse button and pressed Ctrl.
Restores attributes set by RestoreImg of edited image in EHtml / Auto type cell and floating image in Img attribute to default settings.
Restores size of edited image in EHtml/Auto type cell and floating image in Img attribute to default settings. Removes the width and height attributes.
Restores position of edited image in EHtml/Auto type cell and floating image in Img attribute to default settings. Places the image to the top left corner of the cell.
Restores rotation of edited image in EHtml/Auto type cell and floating image in Img attribute to default settings. Removes the rotate setting and the image is rotated to 0 degrees.
Called before image is moved from cell [oldrow,oldcol] to cell [row,col] due InsertImg["assign"] or action AssignImage.
image is HTMLElement if changing edited text image or string as Img attribute value if changing floating image.
Called before Img attribute is changed from old to val in given cell.
Return new value to set to Img attribute or null to use actual val.
Moves actual floating image to another cell after moved or rotated to be the cell always top left corner.
Deletes actual floating image or edited text image.
Creates a copy of actual floating image or edited text image and places it on the same place.
Shows prompt dialog to enter an opacity of actual floating image or edited text image.
Shows prompt dialog to enter a name of actual floating image or edited text image.
Creates floating image from edited text image. Removes the image from text, finishes editing and places it to the Img attribute.
Creates text image from actual floating image. Removes the image from the Img attribute and places it to the end of the cell value as <img> tag. Only if the cell is type of EHtml or Auto.
Deletes one image in given cell on position idx in Img attribute.
If set refresh, it shows changes in grid. If set undo, the change is added to undo queue.
Returns true for success, false for failure. Creates a copy of one image in given cell on position idx in Img attribute. The copied image is put to the idx+1 position.
If set refresh, it shows changes in grid. If set undo, the change is added to undo queue.
Returns true for success, false for failure. Changes attributes of one image in given cell on position idx in Img attribute.
The val is an array of Img attributes:[x,y,width,height,rotate,opacity]. If the array value is null, it is not changed. val can be null to only assign the image.
If set assign, the image can be moved to its top left cell. In this case returns the new cell as array as [row,col].
If set refresh, it shows changes in grid. If set undo, the change is added to undo queue.
Returns true for success, false for failure.