TreeGrid v6.0
HTML types
(Html, Icon, Abs, List, Img, Link)
Basic Html type without any special feature. It shows its value as is in html without any change.
It can also contain a link, use Link attribute.
Remember, to put HTML code into XML, you need to escape the ‘<’ and ‘&’ entities by < and &
If you include the XML directly into HTML page, you have to escape the entities twice: ‘<’ by &lt; ‘&’ by &amp;
The Html type is not editable by default.
If set CanEdit=”1” for Html type, the cell value is edited as the HTML code without any validation.
<C> <cell> string Type [“Text”] Type=”Html” .
To define Html type, set column or cell attribute Type to “Html”
<C> <cell> string EmptyValue [“”] new 6.3 .
The HTML string displayed when the value is empty.
Usable especially for Select type or if used Button=’Defaults’ with Range=’1’.
Shows one clickable image inside cell. To show more complex image button use Button Type.
It can also contain a link, use Link attribute.
It shows the image as background cell image to speed up rendering. To show <IMG> tag, place the <IMG> into Html type cell instead.
The Icon type cell cannot show left side Icon, because it uses the same logic.
The Icon type is not editable by default.
<C> <cell> string Type [“Text”] Type=”Icon” .
To define Icon type, set column or cell attribute Type to “Icon”
<cell> string value .
Cell value contains the image source URL.
The URL can be set also by <C Icon/> for the whole column.
The URL is relative to actual page URL, not to Grid.css, not to XML data!
<C> <cell> string Align [“Center”] new 6.0 .
How the image will be aligned. Case insensitive keyword: “Left”, “Right”, “Center”.
API event bool OnIconClick (TGrid grid, TRow row, string col, int x, int y) new 6.0 .
Called on click to custom Icon type Icon.
x, y is click position inside the icon.
Return true to suppress the default action.
Abs type shows one or more HTML elements absolutely positioned inside the cell in layers.
It does not affect row height, it is always overflowed.
The count of displayed tags is unlimited.
The tags are displayed in given order, the next tags overlays the previous.
<C> <cell> string Type [“Text”] Type=”Abs” .
To define Abs type, set column or cell attribute Type to “Abs”
<cell> string value chg 6.0;upd 7.0.
Cell value is first character separated array: |x|y|width|height|html|cls|style|borderheight|x|y|width|height|html|cls|style|borderheight|x|...
x, y position relative to left top cell edge.
width, height size of the tag. They can be void to not overflow the html tag, but the html tag is still overflowed by the final cell size (column width, row height).
html any HTML code displayed on the position
cls CSS class for the tag
style inline style added for the part, e.g. background image
borderheight (new 7.0) if set CSS class or style with border or padding, here must be set the height of the padding+border
Example: "|0|0|||<div style=’background:red;height:100px;’></div>||||20|3|50|20|The text"
List is HTML type to show more values with the same repeated parts for many rows.
It is intended to shorten the input XML, otherwise it can be always replaced by basic Html type.
The List type is not editable by default.
If set CanEdit=”1” for List type, the cell value is edited as it is without any validation.
<C> <cell> string Type [“Text”] Type=”List” .
To define List type, set column or cell attribute Type to “List”
<cell> string value .
The value contains the array of items, separated by the first character.
The values are merged together using Format. The result can be any HTML code.
<C> <cell> string Format .
Syntax: |BaseFlags|BasePrefix|BasePostfix|Reserved|ItemPrefix|ItemPostfix|Search|Flags|Replace|Reserved|... |ItemNPrefix|ItemNPostfix|NSearch|NFlags|NReplace|NReserved
‘|’ is any character not contained in any section to separate section values.
‘BaseFlags’ is bit array of main flags
1 does not insert ItemPrefix before the first item and ItemNPostfix after the last item
2 escape HTML code in item value
‘BasePrefix’ is HTML code added to the beginning
‘BasePostfix’ is HTML code added to the end
‘Reserved’ is not used yet
‘ItemPrefix’ is HTML code added in front of every item
‘ItemPostfix’ is HTML code added after every item
‘Search’ is RegExp string to replace it for ‘Replace’ string, for every item. ‘Flags’ are flags for RegExp, any of ‘g’, ‘i’, ‘m’.
‘Reserved’ is not used yet
If there are more sequences of ItemPrefix, ItemPostfix, ..., the values are used for items in order. For example if there are three sequences, the first sequence will be used for the first, the fourth and the seventh item, the second sequence for the second, the fifth, ...
Examples:
Value =’|A|B|C|D|E’ Format=’|0|<|>||[|]’ Result=’<[A][B][C][D][E]>’
Value = ‘|A|B|C|D|E’ Format=’|0|xxx|yyy||(|)|[ACE]||*’ Result=’xxx(*)(B)(*)(D)(*)yyy’
Value=’|A|B|C|D|E’ Format=’|1|[|]|||,’ Result=’[A,B,C,D,E]’
Value='|A|B|C|D|E' Format='|0||||<b style="color:red;">|</b>|||||<b style="color:green;">|</b>|||||<b style="color:blue;">|</b>' Result=’ABCDE’
For normal not editable links is better to use Link attribute.
The Link type represents editable link as HTML attribute <A HREF>.
It supports editing of the url and text, unlike the simple Link attribute.
<C> <cell> string Type [“Text”] Type=”Link” .
To define Link type, set column or cell attribute Type to “Link”
<cell> string value .
Cell value contains array of values, first character is separator: |Url|Text|Window
Url is the link url
Text is a text to display, if is empty the Url is displayed instead
Window is browser window name where the link will be opened, for new window set “_blank”
<C> <cell> string Format .
Syntax: |UrlPrefix|UrlPostfix|HtmlPrefix|HtmlPostfix|BaseUrlType
‘|’ is any character not contained in any section to separate section values.
‘UrlPrefix’ is string added before link url
‘UrlPostfix’ is string added after link url
‘HtmlPrefix’ is html code added before link text
‘HtmlPostfix’ is html code added after link text
‘BaseUrlType’ is integer type, if BaseUrl (from <Cfg> tag) is added before url, 0 – no, 1- yes
<C> <cell> string EditFormat [|0|1] .
Syntax: |line|url|link
‘|’ is any character not contained in any section to separate section values.
‘line’ = 0 to edit all at one line, 1 to edit at more lines if needed, 2 to edit every value (url,text) at one line
‘url’ = 1 to display and edit link url
‘text’ = 1 to display and edit link text
<Cfg> string BaseUrl ,
String added before urls in types Img and Link, if their format specifies it.
API event bool OnLinkClick (TGrid grid, TRow row, string col, string url, string target) .
Called after user clicks link at cell of type Link or Img.
It is not called for normal link defined by Link attribute.
Returns true to suppress default action. url is url opened in browser, target is target browser’s window.
<XML event> bool OnClickLink (TGrid Grid, TRow Row, string Col, TEvent Event) .
Called as <Actions> or cell event when the link is clicked.
Attach the action or any JavaScript code to the cell to be run on the click, like <I ... Col1OnClick=’alert(“changed!”)’ ... />
Return true to follow the link, false to cancel
If you display alert or confirm message in this dialog, you must set Grids.Alert = 1; alert(“....”); Grids.Alert = 0; otherwise the link will not be followed.
<Actions> ShowLink ...F Attached to events OnClickLink, OnEnter .
Navigates to URL in Link or Img type in actual or focused cell.
For normal not editable images is better to use Icon type.
The Img type represents editable image with optional link as HTML attribute <A HREF><IMG SRC></A>.
It supports editing of the url, size and link, unlike the simple Icon type.
<C> <cell> string Type [“Text”] Type=”Img” .
To define Img type, set column or cell attribute Type to “Img”
<cell> string value .
Cell value contains array of values, first character is separator: “|image_URL|width|height|left|top|link_URL|link_window”,
image_URL URL with picture to display,
width, height, Size of the image
left, top Position of the image inside its source image, to display only part of the image, must be set with width and height.
link_URL link to page displayed after click to image
link_window browser window name (target) where the link will be opened, for new window set “_blank”
Example: “|/img/test.gif|100|100|0|200|/test/test.html” or “|/img/test2.gif” or “|/img/test.gif|||||/test/test.html”
<C> <cell> string Format .
Syntax: |UrlPrefix|UrlPostfix|HtmlPrefix|HtmlPostfix|LinkPrefix|LinkPostfix|BaseUrlType
‘|’ is any character not contained in any section to separate section values.
‘UrlPrefix’ is string added before source url
‘UrlPostfix’ is string added after source url
‘HtmlPrefix’ is html code added before image
‘HtmlPostfix’ is html code added after image
‘LinkPrefix’ is string added before link url
‘LinkPostfix’ is string added after link url
‘BaseUrlType is integer type, if BaseUrl (from <Cfg> tag) is added before urls, 0 – no, 1- before source, 2 – before link, 3 – before both
<C> <cell> string EditFormat [|0|1] .
Syntax: |line|src|extents|link
‘|’ is any character not contained in any section to separate section values.
‘line’ = 0 to edit all at one line, 1 to edit at more lines if needed, 2 to edit every value (src,extents,link) at one line
‘src’ = 1 to display and edit source
‘extents’ = 1 to display and edit extents (left, top, width, height)
‘link’ = 1 to display and edit link
<Cfg> string BaseUrl ,
String added before urls in types Img and Link, if their format specifies it.
API event bool OnLinkClick (TGrid grid, TRow row, string col, string url, string target) .
Called after user clicks link at cell of type Link or Img.
It is not called for normal link defined by Link attribute.
Returns true to suppress default action. url is url opened in browser, target is target browser’s window.
<Actions> ShowLink ...F Attached to events OnClickLink, OnEnter .
Navigates to URL in Link or Img type in actual or focused cell.
Special interactive cell to drag column captions here.
It is used for custom grouping, but it can be used for any other action.
Only for cell in Space rows.
<Space cell> string Type Type=”DropCols” .
To define Img type, set column or cell attribute Type to “Img”
<Space cell> string value .
Cell value contains comma separated array of column names
<Space cell> string Text [“To group by drag columns here”] .
A text displayed on empty are inside cell
<Space cell> string RelWidth [0] .
Set it to 1 to resize the cell to whole rest of the space row
<XML event> void OnChange (TGrid Grid, TRow Row, string Col, TEvent Event) .
Called as <Actions> or cell event when cell value is changed.
Attach the action or any JavaScript code to the cell to be run on cell value change, like <I ... Col1OnChange=’alert(“changed!”)’ ... />
The new value can be got by Get(Row,Col).