Cell images

FastGrid documentation

There are four types of images in FastGrid:

• Side icons in row cells. They are fast, internally defined in Icons tag.
• Side icon in toolbar cells. They are fast, internally defined in Icons tag or slow if defined by external url.
• Mark icons in cells. They are fast, internally defined in Icons tag.
• External images fixed to cells. They are slow, defined by Src as external url.

Row cell side icons

Internal fast clickable images on cell side
These icons are only in row cells. For Toolbar cells see toolbar Icon.

Every row cell supports three sets of side icons, LeftIcons on left side, RightIcons on right side and TextIcons next to cell text in opposite align side.
All cell icon sets are always displayed in order from left to right or from top to down and next from left to right according to the IconWrap.
The icons never overlay other icons, there is always overflown cell text. If there is no room for all icons, they are always overflown from right side.

Cell space
Cell horizontal space consists for left aligned (Align = 0) or centered cell (Align = 2) cell of:
- IconPaddingLeft, LeftIcons, rest space if centered, PaddingLeft, Value, PaddingRight, TextIcons, rest space, IconSpace, RightIcons, IconPaddingRight
- rest space if centered, PaddingLeft, Value, PaddingRight, TextIcons, rest space, IconPaddingRight
- IconPaddingLeft, LeftIcons, rest space if centered, PaddingLeft, Value, PaddingRight, rest space, RightIcons, IconPaddingRight
- rest space if centered, PaddingLeft, Value, PaddingRight, rest space
- IconPaddingLeft, LeftIcons, IconSpace, rest space if centered, TextIcons, rest space, IconSpace, RightIcons, IconPaddingRight

Cell horizontal space consists for right aligned (Align = 1) or centered cell (Align = 3) cell of:
- IconPaddingLeft, LeftIcons, rest space, IconSpace, TextIcons, PaddingLeft, Value, PaddingRight, rest space if centered, RightIcons, IconPaddingRight
- IconPaddingLeft, LeftIcons, rest space, PaddingLeft, Value, PaddingRight, rest space if centered, RightIcons, IconPaddingRight
- IconPaddingLeft, rest space, TextIcons, PaddingLeft, Value, PaddingRight, rest space if centered
- rest space, PaddingLeft, Value, PaddingRight, rest space if centered
- IconPaddingLeft, LeftIcons, IconSpace, rest space if centered, TextIcons, rest space, IconSpace, RightIcons, IconPaddingRight

Predefined buttons and icons

These icons except Check ignore {name}Icon!
To use default button with custom icon choose custom name and define the {name}Icon and {name}Button as the default button name.

Button	Icon	Used in	Description
Empty			Icon to ignore or just to preserve the icon space
Check	Check, Radio	Bool type and Check icon	Check box or radio button with states on [x], off [ ], unknown [?] or number [1] - [999].
List	List, ListSmall	List / ListMenu	To display popup list menu
Date		Date type	To display popup calendar
Filter		Kind="Filter" row / column	Shows filter operator icon for operators 0 - 14.
FocusAll			Focused all cells
CollapseRow	CollapseRow, ExpandRow	Row tree	Custom icon to display expand / collapse icon in cell outside the tree column
CollapseCol	CollapseCol, ExpandCol	Column tree	Custom icon to display expand / collapse icon in cell outside the column tree part
SelectRow	SelectRow_0, SelectRow_1	Panel	Icon to select / unselect the row
SelectCol	SelectCol_0, SelectCol_1	Panel	Icon to select / unselect the column
SelectRows		Panel in Header	Icon to select / unselect all rows. More controlled by SelectAllType
SelectCols		Panel in Header	Icon to select / unselect all columns. More controlled by SelectAllType
DeleteRow		Panel	Icon to delete / undelete or remove the row
DeleteCol		Panel	Icon to delete / undelete or remove the column
DeleteRows		Panel in Header	Icon to delete / undelete selected or focused rows
DeleteCols		Panel in Header	Icon to delete / undelete selected or focused columns
HideRow		Panel	Icon to hide the row
HideCol		Panel	Icon to hide the column
HideRows		Panel in Header	Icon to hide selected or focused rows
HideCols		Panel in Header	Icon to hide selected or focused columns
AddRow		Panel	Icon to add new row near this row or to copy this row alone or with children
AddCol		Panel	Icon to add new column near this column or to copy this column alone or with children
AddRows		Panel in Header	Icon to add new row(s) or copy focused or selected rows
AddCols		Panel in Header	Icon to add new column(s) or copy focused or selected columns

List of icons displayed on the cell left edge. It can be set as JSON array or comma separated string.
If the icon is listed as 'xxx', its display icon is set by xxxIcon, its button for actions is set by xxxButton. If these attributes are not set, the listed name 'xxx' is used.
For example { LeftIcons: "Expand,Test", TestButton:"Check", TestIcon:"Radio" } shows two buttons (icon), Expand (Expand) and Check (Radio).
The LeftIcons are always displayed left to the cell text.
List of icons displayed on the cell right edge. It can be set as JSON array or comma separated string.
If the icon is listed as 'xxx', its display icon is set by xxxIcon, its button for actions is set by xxxButton. If these attributes are not set, the listed name 'xxx' is used.
For example { RightIcons: "Expand,Test", TestButton:"Check", TestIcon:"Radio" } shows two buttons (icon), Expand (Expand) and Check (Radio).
The RightIcons are always displayed right to the cell text.
List of icons displayed next to the cell text, left or right side. It can be set as JSON array or comma separated string.
If the icon is listed as 'xxx', its display icon is set by xxxIcon, its button for actions is set by xxxButton. If these attributes are not set, the listed name 'xxx' is used.
For example { TextIcons: "Expand,Test", TestButton:"Check", TestIcon:"Radio" } shows two buttons (icon), Expand (Expand) and Check (Radio).
The TextIcons are displayed right to the cell text for Align = 0 (left) / 2 (center) and left to the cell text for Align = 1 (right) / 3 (center).
Displayed icon for given name listed in LeftIcons / RightIcons / TextIcons. If not set, it is directly the listed name.
The usable icons are defined in Icons tag, default FastGrid icons are defined in Styles.js.

The icon definition can contain parameters in (), including JavaScript code. The JavaScript code can use variables Grid, Row and Col. The JavaScript code must be an expression returning value not any statement(s).
For example: TestIcon:"MyTest(3,Row.id)".
The parameters are accessible in Icon definition JavaScript code in { } as variable P[x], where x is the parameter index from 0.
If changed by API SetAttr, call also Repaint(2).

External images
The {name}Icon can be set also to url to external image file or included image by "data:".
The relative urls are relative to the main page url, not to FastGrid url.
Size of the external image can be set by IconHeight. If not set, the image is shown on its original size. The external image is shrunk, if the image default or explicit height is higher than the row height. It does not change the width reserved for the icon by the IconWidth.
Using external images can slow down paint!
External images should be used only for development; in production they should be converted to internal images in Icons.
Height of the external image icon in pixels. The external image icon is set by Icon to not existing icon in FastGrid Icons and is taken as url.
The height cannot be higher than row height. The icon width is updated accordingly, but space reserved for the icon is not updated and is always the IconWidth!
If changed by API SetAttr, call also Repaint(2).
Action button for given name listed in LeftIcons / RightIcons / TextIcons. If not set, it is directly the listed name.
To this button events are assigned actions in Actions object or in Cell / Row / Col / Tool / Toolbar.
For example { id:1, LeftIcons:"AAA", AAAIcon:"III", AAAButton:"BBB", OnClickBBB:"alert('clicked BBB icon in cell '+Col.id+Row.id);" }.
Tooltip displayed on mouse over the icon. See Cell tooltip.
Space between the most left icon and cell left edge, in pixels.
Space between the most right icon and cell right edge, in pixels.
Vertical space between icon top edge and text top edge, in pixels.
Vertical space between the icon top edge and cell top edge is IconPaddingTop + PaddingTop.
It is Row attribute unlike the cell attributes IconPaddingLeft / IconPaddingRight.
Default values for IconPaddingTop (-1) and IconPaddingBottom (-1) center the icons vertically according to the text line height. Vertical space between icon bottom edge and text bottom edge, in pixels.
Vertical space between the icon bottom edge and cell bottom edge is IconPaddingBottom + PaddingBottom.
It is Row attribute unlike the cell attributes IconPaddingLeft / IconPaddingRight.
Specifies vertical align of cell icons in LeftIcons, RightIcons and TextIcons and row tree icons.
0 - align top, 1 - align bottom, 2 - align middle.
If not set, cell VertAlign is used.
If the icons are displayed horizontally or vertically or in square.
Wrapping icons is independent on wrapping cell text, the icon line height is different than the line height in the text.
0 - horizontally - all icons are displayed on the same line from left to right.
1 - auto (default) - the icons are first displayed vertically from top to bottom and next in next columns from left to right.
2 - vertically - all icons displayed in the same column from top to bottom. If there is no room for all icons, they are overflown from bottom.
3 - auto always - like 1, but is used also for wrapped cells (Wrap). It can cause some visual problems.
If the row height depends on the cell text height (the row has not set Height and cell has set Wrap&7 = 1-7) the 1 (auto) is forced set to 0 (horizontally).
Default value is 1 for normal columns and 0 for special read only column like Panel or Header.
Horizontal space between individual icons, in pixels. For IconWrap = 0 / 1.
Vertical space between individual icons, in pixels. For IconWrap = 1 / 2.
It is global Cfg attribute unlike cell attribute IconSpace.
Width of icons used in row cells and in toolbars, in pixels.
Specifies the space reserved for the icon, changing the IconWidth does not resize the icons.
Height of icons used in row cells and in Toolbars, in pixels.
Specifies the space reserved for the icon, changing the IconHeight does not resize the icons.
CSS style added to <svg style=""> containing all the icons, e.g. IconStyle:"shape-rendering:optimizeSpeed" zooms the svg lines differently.
String added before all custom relative urls. It should end by slash '/'.
It is also generated from actual url when Save data by "Print" option.

Icons definition

All icons to use in LeftIcons, RightIcons, TextIcons, toolbar Icon and Popup and Marks / M are defined in root tag Icons as individual Icon objects by their id.
The icons are referred by the id the Icon is placed in Icons.
Default Icons are defined in Styles.js.

Icon definition
The Icon defines attributes for SVG <path> to render into the cell SVG background.
The icon is defined in [] as JavaScript Array of attributes for the individual SVG <path> tags. The paths are rendered in the defined order.
For example: Filter_2: [{ s:"line", sw:1.5, d:"m4,7h9m0,4h-9" }, { s:"filterstrike", sw:1, d:"m14,3l-11,12" }]

d	Standard attribute for <path> definition. If the part does not define the d, it is special not rendered part with icon settings.
s	Shortcut for stroke. It specifies SVG color as "#RRGGBB" or "rgba(R,G,B,O)" or can refer color from Colors.
sw	Shortcut for stroke-width. Width of stroke in pixels.
slj	Shortcut for stroke-linejoin. Type of joining lines.
sda	Shortcut for stroke-dasharray. Dots and dashed in lines.
f	Shortcut for fill. It specifies SVG color as "#RRGGBB" or "rgba(R,G,B,O)" or can refer color from Colors. Default value is "none" instead of "black" if defined s / stroke attribute.
c	Special attribute, copies part of specified icon. Copies all attributes not defined in actual part from the specifies icon, from the part on the same position or from part set by ci. Copies from the first part, if the source icon has not any part on the destination position. For example: Source:[{ f:"back", d:"m1.5,1.5h14v14h-14z" }, { s:"icon", sw:1.5, d:"m1.5,8a7,7,0,1,1,0,1z"}], Dest:[{ sw:1.5, d:"m4.5,7.5l3.5,4l4.5-7" },{ c:"Source", s:"red" }] The Dest will be expanded to: Dest:[{ sw:1.5, d:"m4.5,7.5l3.5,4l4.5-7" },{ s:"red", sw:1.5, d:"m1.5,8a7,7,0,1,1,0,1z"} }]
ci	Special attribute, specifies part index for copy by c.
m	Special attribute, adds this string in front of d. Useful for moving icon when copying d from other icon.
g	Generates the whole icon dynamically by JavaScript. It can be used in settings part that has not d attribute. If used, all other parts will be ignored. The JavaScript code is run whenever painting the icon. The code can contain statements and "return" statements. g value can contain any JavaScript code that returns generated icon as JavaScript array with pairs:[attrs1,d1,attrs2,d2,...]. The attrs are full SVG path attributes with values, the d is value of path d attribute. The attrs can contain only valid SVG path attributes and their values, not any FastGrid shortcuts or Colors. It must set fill='none' even if defined stroke. The code can read these variables: Grid, Row, Col, W (expected width in px), H (expected height in px), Zoom (set only in toolbar, to IconZoom) and P as array of parameters passed on icon use.. The return example: ["stroke='red', stroke-width='2'", "m1.5,1.5h14v14h-14z", "stroke='blue' fill='lime'", "m1.5,8a7,7,0,1,1,0,1z" ]. The code example: TextLine: [{g:"return ['stroke=\"'+P[0]||Grid.Colors['tool']+'\" stroke-width=\"1.5\" fill=\"none\"','m4.5,12l4,-9l4,9m-6.5,-3.5h5'];"}],. The code example 2: ColorChart: [{m:19,g:"Grid.ColorChart(Row,Col,W,H,P)"}]. Or g can return also string as generated another icon call with parameters like "MyIcon(param1,'param2',param3')".
def	Special attribute, lists all SvgDefs referred by this icon. It is required to include these <defs> in the final svg.

Other standard SVG <path> attributes must be used in full name, and quoted if contain "-", e.g. { "stroke-dasharray":"3 5 2 3", ... }

The whole icon part can be string instead of object to copy specified icon, all its parts.
For example: CheckMin: [ "Check", "Question", { s:"icon", d:"m14,3l-11,12" } ] copies icons "Check" and "Question" and adds next path.

Every attribute value can contain JavaScript code in { } that will be run during icon paint to calculate the attribute value.
This code must be simple expression returning value that will be used as replacement of the { }.
This code must not be any JavaScript statement and must not contain { or }, either inside string.
The returned value should be of expected type, e.g. number if returning sw / stroke-width.
The code can read these variables: Grid, Row, Col, W (expected width in px), H (expected height in px), Zoom (set only in toolbar, to IconZoom) and P as array of parameters passed on icon use.
For example: Line: [{ s:"tool", sw:"{P[0]}", "stroke-dasharray":"{P[1]?P[1]:''}", d:"m0,{P[0]%2/2+8}h17" }].

Mark icons and charts

Internal inactive background icons or charts
Defines mark images in the row cells.
Defined as an object with values assigned to column ids. For example: { id:1, M:{ C:"Formula;Error", D:["Error(5)","ReadOnly(19)"] } }
It supports also Array and String definition by AIndex like A attribute, but these definitions have slower processing and are used rarely.
If defined in default row, the values are copied to the rows' M attributes on loading (only where the row M item has null value), so later changes in default row do not change the cell marks.

Definition
The individual cell value can be array of strings, e.g. ["Formula(1,5)","Error"]
Or string with items separated by semicolon or comma, e.g. "Formula(1,5);Error". Comma is not recommended, if mark parameters contain complex JavaScript code.
To reserve empty space for icon use Empty icon.

Icons position in the cell
One value can contain parameters in brackets, like JavaScript function call, where the first parameter is the cell corner, direction of more icons and layer (z-index):
0 - default value, uses MarkDir,
1 - at top left, to right, 2 - at top left, to down, 3 - at top right, to left, 4 - at top right, to down,
5 - at bottom right, to left, 6 - at bottom right, to up, 7 - at bottom left, to right, 8 - at bottom left, to up,
9 - at top left, all icons on the same position, no size, no direction.
0 - 9 - icons layer (the fastest paint) - if marks overlay icons, the z-index is not specified and the icons can mix,
10 - 19 - background layer - if marks overlay icons, the marks are always placed under icons,
20 - 29 - foreground layer - if marks overlay icons, the marks are always placed above icons, but still under the text.
The icon call does not support the first parameter if the corner/direction/layer is set in the icon definition by m, usually to 19 as cell background position.

Calculated expressions
Value can contain also calculated JavaScript expression. In the expression it is possible to use variables Grid, Row and Col.
For example: "Error(5,Grid.GetValue(Row,Col)+10);ReadOnly(3)".
Using many calculated marks can remarkably slow down the paint!

Mark icons
Mark icons are defined in Icons like other grid icons, but with these extensions:

The icon definition can contain calculated expression in any attribute, in { }, where it is possible to use variables: Grid, Row, Col, W (cell width without border), H (cell height without border), P (array of parameters in the M / Marks definition, P[0] is always the corner+direction+layer).

The icon can contain an object with icon parameters. The object must not have defined attribute d and can have defined attributes:
m - corner / direction / layer, used instead of MarkDir, w - icon width, used instead of MarkWidth, h - icon height instead of MarkHeight,
defs - svg code added to <defs> after SvgDefs, it can contain also calculated code in {}. Useful to generate svg patterns.
single - if set to 1, it does not join the same icons in more cells, useful for gradients.
For example: Cross: [{m:19},{s:"{P[1]?P[1]:'grid'}",d:"m0.5,0.5l{W-1},{H-1}m{1-W},0l{W-1},{1-H}"}] In rare cases cell marks can be defined also in columns or default columns.
These values are copied to the rows' M attributes on loading (only where the row M item has null value), so later changes of columns do not change the cell marks.
Defines mark images in the cell or toolbar cell.
The syntax and usage is the same as one cell in M.
If the cell marks are defined in both M and Marks, both of them are rendered and used as Marks+";"+M[col.id].
Default corner, direction for more marks and layer for mark icons.
Used if the M / Marks definition does not set it or use 0 in the first parameter.
1 - at top left, to right, 2 - at top left, to down, 3 - at top right, to left, 4 - at top right, to down,
5 - at bottom right, to left, 6 - at bottom right, to up, 7 - at bottom left, to right, 8 - at bottom left, to up,
9 - at top left, all icons on the same position, no size, no direction.
0 - 9 - icons layer (the fastest paint) - if marks overlay icons, the z-index is not specified and the icons can mix,
10 - 19 - background layer - if marks overlay icons, the marks are always placed under icons,
20 - 29 - foreground layer - if marks overlay icons, the marks are always placed above icons, but still under the text.
Default width of mark icons, in pixels.
Default height of mark icons, in pixels.
Returns value of cell M as is, without any conversion.
Sets value to cell M as is, without any conversion.
Returns true, if the value was changed or false if the value was the same.

Mark icons

There are many internal Mark icons used by FastGrid for cell and row/column states. They are listed and described in Styles.js. Here are listed only special Mark icons.
The listed functions can be used only as value for M or Marks attribute.
In the function parameters it is possible to use JavaScript code, e.g. to call external function: Marks:"Chart({Values:Grid.Script.GetMyValues(Grid,Row,Col),Chart:'Line'})" Returns bar or line chart according to the parameters. The parameters is an object with these possible properites:

string	Chart	chart type. It can be "Bar" (default) as bar chart, "Line" as line chart. Case insensitive.
any	Values[]	source values for chart, every value is one bar or one point, it can be numbers as direct values or column ids as cell values from the same row or row ids as cell value from the same column, or empty as cell value where the chart is displayed
number	Max	maximal bound. If the chart value is higher than this bound, it is colored by Over... color. If not set, it is set to the highest value in Values. The size of the chart is Max - Min.
number	Min	minimal bound. If the chart value is lower than this bound, it is colored by NegOver... color. If not set, it is set to the lowest value in Values.
number	Zero	zero bound. If the chart value is lower than this bound, is is colored by Neg... If set axis, it is shown on the Zero
number	Direction	direction of the chart, 0 = bars from bottom to top, 1 = bars from right to left, 2 = bars from top to bottom, 3 = bars from left to right
bool	Differences	for 1 shows chart for differences between adjacent values, as Values[0] - Zero, Values[1] - Values[0], Values[2] - Values[1], ...
string	Fill	fill color of the bars in Bar chart or points in Line chart. If not set, the bars / points are not filled.
string	Stroke	stroke color of the bars in Bar chart or the points in Line chart. If not set, the bar / point has no stroke. If not set in Line chart, the LineStroke is used.
string	NegFill	fill color of the bars in Bar chart or points in Line chart for values below Zero. If not set, Fill is used.
string	NegStroke	stroke color of the bars in Bar chart or the points in Line chart for values below Zero. If not set, Stroke is used.
string	OverFill	fill color of the bars in Bar chart or points in Line chart for values above Max. If not set, Fill is used.
string	OverStroke	stroke color of the bars in Bar chart or the points in Line chart for values above Max. If not set, Stroke is used.
string	NegOverFill	fill color of the bars in Bar chart or points in Line chart for values below Min. If not set, NegFill or Fill is used.
string	NegOverStroke	stroke color of the bars in Bar chart or the points in Line chart for values below Min. If not set, NegStroke or Stroke is used.
int	Point	point size and shape: 0 - not shown (default), 1 - point, 2 - small rect, 3 - big rect, 4 - small triangle up, 5 big triangle up, 6 - small triangle down, 7 big triangle down, 8 - small circle, 9 - big circle.
int	NegPoint	point size and shape in Line chart for values below Zero. If not set, Point is used.
int	OverPoint	point size in Line chart for values above Max. If not set, Point is used.
int	NegOverPoint	point size in Line chart for values below Min. If not set, NegPoint or Point is used.
int	Line	line width in pixels in Line chart, 0 is not shown, 1 is default
int	LineStroke	color of the line connecting the points in Line chart. If not set, the Stroke or Fill or "black" is used.
string	LineDash	SVG stroke-dashrray for the line in Line chart. It can contain only space separated numbers.
string	Axis	color of the axis line shown on Zero. If is null for Line chart, the axis is shown in LineStroke. If it is empty (or for Bar chart also null), it is not shown at all
string	AxisDash	SVG stroke-dashrray for the axis. It can contain only space separated numbers.
any	Padding	padding in pixels, it can be one value or array of 2 - 4 values like in css, but only numbers
int	Count	the count of charts in one cell. These charts will be shifted to be the individual values adjacent. The bars in Bar chart are shrunk accordingly.
int	Order	the order (from 0) in the shifted charts set by Count. The higher value, the more is the chart shifted.
int	Space	space between bars in Bar chart
string	Button	Button name for mouse events. If set, the chart generates mouse events for its individual parts. It can slow down rendering for bigger charts! The Event.Button, accessible in the JSON events, contains the Button_value+underscore+index_from_0. For example { Marks:{ "Chart({ Button:'XXX', ...})" }, OnClickXXX:'alert("Clicked part "+Event.Button.slice(4))' }

For example: Marks: " Chart({ Chart:'Line', Values: [3e4,6e4,9e4,12e4,15e4,50e4,0,-1e4,-2e4,-3e4,-10e4,3e4], Max:300000, Min:-50000, Zero:30000, Line:2, LineStroke:'silver', Point:9, Fill:'rgba(255,0,255,0.5)', Axis:'#5F677E', Padding:[0,1,0,2] }); " Returns one colored bar according to the parameters, often used for gauge. The parameters is an object with these possible properites:

float	Width	Bar width in pixels. If <1, it is multiplied by the cell width. If not set, it is used as cell width.
float	RelWidth	Bar relative width in pixels, an alternate to Width. It is always multiplied by the cell width.
int	MinWidth	Bar minimal width in pixels. If it is not set and bar width is 0, nothing is shown.
float	Height	Bar height in pixels. If <1, it is multiplied by the cell height. If not set, it is used as cell height.
float	RelHeight	Bar relative height in pixels, an alternate to Height. It is always multiplied by the cell height.
int	MinHeight	Bar minimal width in pixels. If it is not set and bar height is 0, nothing is shown.
float	Left	Padding left in pixels. If <1, it is multiplied by the cell width.
float	Right	Padding right in pixels. If <1, it is multiplied by the cell width.
float	Top	Padding top in pixels. If <1, it is multiplied by the cell height.
float	Bottom	Padding bottom in pixels. If <1, it is multiplied by the cell height.
int	Align	Horizontal alignment of the bar inside its padding area, 0 - left (default), 1 - right, 2 - center.
int	VertAlign	Vertical alignment of the bar inside its padding area, 0 - top, 1 - bottom, 2 - middle (default).
string	Fill	Background color of the bar, it can be SVG fill value or FastGrid color name.
string	Fill2	Second color for gradient background of the bar, it can be SVG fill value or FastGrid color name.
int	FillDir	Direction of gradient if set Fill2, 0 - left => right, 1 - top left => bottom right, 2 - top => bottom, 3 - top right => bottom left
bool	FillSingle	If set, the gradient is calculated for every bar, otherwise the gradient is calculated for the whole area with the same gradient.
string	Stroke	Line color of the bar, it can be SVG stroke value or FastGrid color name.
int	StrokeWidth	Line width in pixels.
string	StrokeDashArray	Line SVG stroke-dasharray value.
bits	StrokeEdge	Which bar edge will show the line, bit array. 1 - top, 2 - right, 4 - bottom, 8 - left.
int	Round	Rounded corners of the bar, in pixels.
bits	RoundEdge	Which corner will be rounded by Round, bit array. 1 - top left, 2 - top right, 4 - bottom right, 8 - bottom left.

For example: Marks: " Bar({ RelWidth:Math.abs(Grid.GetValue(Row,Col)/10), Fill:Grid.GetValue(Row,Col)<0?'#FA0':'#0AF', Fill2:'white', FillDir:1, FillSingle:1, Stroke:'#952', StrokeDashArray:'3 1', Round:5, StrokeEdge:7, RoundEdge:6, Left:3, Right:33, Top:3, Bottom:3 }) "

Row cell images

External slow, floating images outside cells. Use carefully!
The Images are placed on cell foreground or background, fixed to specified cell and position.
The Images are not defined in cells, but are defined in global array Images.
The Images can be moved, copied, deleted, resized, rotated and cropped by mouse dragging or API.
The Images cannot be used on toolbar, here can be external image shown in Icon attribute.
All changes done by API SetImageAttr / MoveImage / ResizeImage / AddImage / DeleteImage are done immediately without needing Paint!
Definition list of all images in FastGrid. It contains array of Image objects.
The images should contain at least attributes Row, Col and Src.
The images are rendered to grid in random order!
External images are slow, use carefully! Defined default images that can be assigned to Image by its id to D attribute.
If image has not set D attribute, it has assigned "Image" def.
By default (in Defaults.js) there are defined these DefImage:
Base - Base default inherited by all default images without explicitly set the D attribute. Except to Base DefImage itself.
Image - Default image assigned to every image without explicitly set D and to all dropped or opened images.
Reference to default item(s). The D can be:
a) string or number as id of the default,
b) comma separated string as list of the defaults id,
c) array of strings or numbers as list of the defaults id.
If more referred defaults have defined the same attribute, the first listed default is preferred.
If the same attributes are defined somewhere deep (in referred defaults of the referred defaults), preferred is the shallower definition.
The relations between default items are solved on loading, so after load every default item contains all its attributes read from all its default items and no D attribute.
Reference to default item (its id).
From default item are read all attributes that are null in the referring item. Every item can refer only to one default item.
If set, places the image to given index. If there is already some image on the index, merges the images according to the Remove value.
Standard URL of the image data. It can contain also direct data in "data:".
id of the row the image is fixed to. It cannot be toolbar.
The image is moved with the row. The image is not moved when the row is resized.
The image size can exceed the row height on both sides. The image cannot exceed its part.
id of the column the image is fixed to.
The image is moved with the column. The image is not moved when the column is resized.
The image size can exceed the column width on both sides. The image cannot exceed its part.
Image horizontal position in pixels related to the left edge of the Col. It can be negative. If not set, 0 is used.
Image vertical position in pixels related to the top edge of the Row. It can be negative. If not set, 0 is used.
Width of the image in pixels to resize the image. If not set, the image default / intrinsic width is used.
If the image preserves its aspect ratio, it affects also image height.
Height of the image in pixels to resize the image. If not set, the image default / intrinsic height is used.
If the image preserves its aspect ratio, it affects also image width.
Image default width in pixels. It is used if the Width is not set and the vector (svg) image has not specified its intrinsic width.
Image default height in pixels. It is used if the Height is not set and the vector (svg) image has not specified its intrinsic height.
Maximal default width for not resized images. It is used if the Width is not set and the vector (svg) image has specified its intrinsic width too big.
Maximal default height for not resized images. It is used if the Height is not set and the vector (svg) image has specified its intrinsic height too big.
It crops image from the left edge. Removes this amount of pixels from the left side of the image.
It crops image from the top edge. Removes this amount of pixels from the top side of the image.
It crops image from right edge. Shows only this amount of pixels of the image, from CX position.
It crops image from bottom edge. Shows only this amount of pixels of the image, from CY position.
Z index of the image position. Higher value moves the image above other images.
If the value is negative, moves the image under the cell content and the image is inactive background without events.
Rotates the image by given number of degrees (0-360) clockwise.
Sets the image opacity, value between 0.0 (transparent) and 1.0 (opaque).
If set, the image is not displayed. If set, image cannot be moved by actions.
If set, image cannot be copied by actions.
If set, image cannot be deleted or removed by actions.
If set, image cannot be changed by actions.
1. bit &1 - resized.
2. bit &2 - rotated.
3. bit &4 - clipped.
4. bit &8 - opacity set.
5. bit &16 - hyperlink set.
6. bit &32 - zindex set.
Tooltip displayed on mouse over the image. See Cell tooltip.
If set, assigns <a> hyperlink to the image and follows it on click.
Link target window where the Link opens.
Mouse cursor when hovering the image. Standard CSS cursor value. If set (by default), it is restricted to show links with "javascript:" protocol.
If and how the grid permits moving and copying images by dragging.
0 - any image dragging is restricted.
1 - dragging images is permitted only in the same part.
2 - dragging images is permitted between parts with the same AcceptImages, in the same grid.
3 - dragging images is permitted between parts with the same AcceptImages, among all grids.
Images can be dragged only between parts with the same AcceptImages value.
Images can inserted only to parts with the AcceptImages set not to 0.
Default value is 1 for Cols and Body and 0 for all other parts.
If and how can be images added to the grid.
1. bit &1 - external images can opened by Open action.
2. bit &2 - external images can be dropped to grid.
3. bit &4 - more images can be opened at once.
4. bit &8 - existing images can copied by dragging.
If and how can be images deleted.
0 - no, 1 - deleted and changes uploaded, 2 - remove without uploading changes.
If and how can be images modified.
1. bit &1 - resized.
2. bit &2 - rotated.
3. bit &4 - clipped.
4. bit &8 - opacity set.
5. bit &16 - hyperlink set.
6. bit &32 - zindex set.
Ensures visibility of image when dragged outside the part area. Value in pixels.
If it is higher than zero, it is minimal visible size of the image. If it is zero or negative, it is maximal hidden size of the image.
If the image is dragged more than this limit outside the part area, it is moved back.
Minimal visible width and height of image when resizing or cropping, in pixels. If resized image width and height under this value (in pixels), its size is restored to values before resizing.
If resized image width and height under this value (in pixels), its size is restored to original image size.
Used when rotating image by mouse dragging to better choose angle values 0, 90, 180 and 270.
The higher value, the more are the angles 0, 90, 180 and 270 fixed against other values.
Minimal opacity in percent to enter for image.
If files can be dropped to the grid.
If set to 1 or -1, dropping of any unsupported file to the grid will cancel default browser action for this file drop.
It must be set to 1 to permit dropping xlsx files for import and dropping image files to cells.
String added before all custom relative urls. It should end by slash '/'.
It is also generated from actual url when Save data by "Print" option.
Returns biggest used image index in Images.
Returns array of image indexes fixed to given cell. The row or col can be null to return all images fixed to the whole column or row.
Function is slow, iterates all images in grid.
Returns value of attribute attr of the image index.
Sets value of attribute attr of the image index to value.
If value is null, clears the attribute value.
It can be used only for attributes: Src, ZIndex, Rotate, Opacity, Hidden, Link, Target, NoMove, NoDuplicate, NoDelete, NoChange.
If set changes, marks the image as changed (for attribute Hidden marks as hidden).
Returns true for change, false for the same value and null for incorrect index or attribute.
Returns image size as [width,height] in pixels.
If the image has not set its Width / Height attributes and is not rendered, returns the extent as 0.
Moves or copies the image index to the new position. Fixes the image to given cell and to given point.
Changes attributes Row, Col, X, Y. If some of the row, col, x, y is null, it does not change this attribute.
If set options&1, marks the image as moved.
If set options&2, creates a copy of the image and moves the copied image.
If set togrid, moves or copies the image to this grid. Moved image is deleted in source grid.
Returns index of copied image or the index or null for error.
Resizes and / or crops the image index.
width, height is the new image size, it sets attributes Width and Height. If set to false, it removes the attribute and uses the image intrinsic size.
cx, cy, cwidth, cheight is the new crop for the image, it sets attributes CX, CY, CWidth, CHeight. If set to false, it removes the attribute crop edge.
If some of the parameter is null, it does not change this attribute.
If set changes, marks the image as resized.
Return true if the image has been resized or cropped, false for the same size and null for incorrect parameters.
Adds the Image object image to the Images and shows it, if applicable.
The image should contain at least attributes Row, Col and Src.
If set changes, marks the image as added.
Returns the image index under that the image was added. The indexes are reused after removed images by RemoveImage.
The image index is permanent and is not changed until the image is removed.
Marks given count of images starting by index as deleted (del = 1) or not deleted (del = 0).
Hides the deleted images and shows the undeleted images.
If del is null, changes deletion state.
Returns true for success and null for incorrect parameters.
Permanently removes given count of images starting by index from Images.
Does not store any changes in the image, the removed image cannot be uploaded to server.
To remove all images in grid call RemoveImage(0,1e10).
Returns true for success and null for incorrect parameters.
Starts moving the image by mouse dragging.
If set copy, copies the image and moves it.
If set onedir, moves the image only in one direction - vertically or horizontally.
Starts resizing the image by mouse dragging.
If set free, does not preserve aspect ratio. It does not work if the image itself preserves its aspect ratio.
If set onedir, resizes the image only in one direction - vertically or horizontally.
Starts rotating the image by mouse dragging.
Starts clipping the image from the nearest edge by mouse dragging.
Changes the image ZIndex to be above all other overlaid images.
If set back, moves the under all other overlaid images, for 1 it never sets ZIndex below zero, 2 - for zero ZIndex moves all other overlaid images above, 3 permits setting ZIndex under zero, to be under cells, but inactive.
Resets the image size, clipping, rotation and opacity to their default values.
The image Width and Height are set to the original values set on image load, the others are set to zero.
If set confirm, shows confirmation message before the action.
Displays system dialog to open one or more image files and adds it / them to the actual or focused cell.
Deletes or removes image under mouse.
del = 0 - deletes or removes the image according to DeletingImages, 1 - deletes, 2 - removes.
Prompts user for Opacity value between 10% and 100%.
Prompts user for Link value.
Opens the Link in window Target.
Called before navigates to the Link of image index.
href is the Link, target is the Target.
Return new string for href to navigate here. Or return true to cancel the action.
Called before system dialog for opening file is displayed.
row, col is the cell where the file will be inserted.
test is set if just testing the action possibility.
Return true to cancel the action.
Called on drop any file to grid if permitted by DropFiles.
files is array of JavaScript File objects that were dropped to the cell row, col.
Return true to cancel the action.
Called on drop any file to grid if permitted by DropFiles.
Called only if the dropped file was not processed by FastGrid.
files is array of JavaScript File objects that were dropped to the cell row, col.
Called after image file was opened by a user in system dialog (drop = 0) or dropped to grid (drop = 1), but before it is added to the grid.
image is image object that will be added. It contains attributes D, Row, Col, X, Y and Src. The event handler can modify the image object, change the existing attributes or add new attributes.
Return true to cancel the action.