TreeGrid v6.0

HTML types

(Html, Icon, Abs, List, Img, Link)

TreeGrid documentation index

 

 

 

Html type

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 &lt; and &amp;

If you include the XML directly into HTML page, you have to escape the entities twice: ‘<’ by &amp;lt;   ‘&’ by &amp;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’.

 

Icon type

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

 

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|||&lt;div style=’background:red;height:100px;’>&lt;/div>||||20|3|50|20|The text"

 

List type

 

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|&lt;|>||[|]’ 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||||&lt;b style="color:red;">|&lt;/b>|||||&lt;b style="color:green;">|&lt;/b>|||||&lt;b style="color:blue;">|&lt;/b>' Result=’ABCDE

 

 

Editable Link type

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.

 

Editable Img type

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.

 

DropCols type

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).