News in version
TreeGrid Gantt chart SpreadSheet Examples Documentation Download Development Licensing Prices References Contacts Buy Try it free
Documentation
Search in documentation
TreeGrid versions compatibility

Changes log (txt file) Using custom CSS from 13.3 to 14.0 Upgrading from 9.3 to 10.0 Upgrading from 5.9 to 6.0

Using in JavaScript frameworks

Angular Ember Express React Svelte Vue Other frameworks NodeJS server SalesForce LWC

Creating grid

Simple examples Basic information Creating grid Deleting grid Reloading grid Rendering grid Accessing grid by API

Data & communication
Data communication with server

Communication types AJAX communication AJAX SOAP envelope Submit communication Directly included data Data from JavaScript Cross domain / local load by JSONP Sessions (AJAX) Server response (AJAX) Synchronous communication (AJAX) Caching (AJAX) API (AJAX)

Download data

Settings for data download Layout XML structure Data XML structure

Upload data

Settings for data upload API for upload XML structure sent to server

Changing data from server

XML structure of download changes XML structure of request for a cell Synchronizing data with server

Input / output data formats

Complete list of tags Internal XML format Short XML format Extra short XML format DTD XML format JSON format

Cells
Cell basics

Cell type Cell format Dynamic format Dynamic type Cell value Reading / writing attributes by API Cell HTML Cell default Range or more values in one cell Cell with link URL Cell hint Cell tooltip / title Cell popup menu

Cell editing and changing values

Cell editability Dynamic editing Locking Defaults list Suggest list (auto complete) Tags input Changing cell value Mass cell change Clearing cells Editing cells Controlling <input> tag by JavaScript Input validation and restrictions Side checkbox Cell selecting

Calculations - cell formulas

Basics Formulas Mathematical functions Aggregate functions Special functions for actions Custom functions

Calculations - editable cell formulas

Basics Suggest list (auto complete) Defined names Actions for choosing cells Conditional functions Lookup functions Cell reference functions Logical functions Informational functions Mathematical functions Trigonometry functions Rounding numbers Number conversions String functions Date functions Summary functions Custom functions

Cell side buttons

Introduction Right side Button Left side Icon

Cell spanning

Column span Row span Dynamic spanning

Cell style and color

Basic grid style Sizing and scaling - responsive design Dynamic cell style attributes Cell CSS class Cell background color Dynamic cell border Cell HTML style Row color alteration Cell mouse cursor

Editable cell images

Insert image Edit image

Cell types
Automatic type - Auto String - Text, Lines & Pass
Number - Int & Float

Format Localization

Date and time - Date

Format Calendar component Dates dialog Localization

List & combo - Enum & Radio

Introduction Definition Related lists Enum specific Radio specific

Checkbox - Bool
Action button - Button

Introduction Basic clickable button Switch button Radio / tab button Menu button Combo switch button Combo radio / tab button Special Space rows with buttons

Panel with more buttons - Panel

Definition Standard fast panel Custom panel

HTML and special types

Html type EHtml type (editable) Icon type Abs type List type Editable Link type Editable Img type DropCols type Upload File type

Columns

Column basics Column index Column visibility Column visibility menu Column selecting Column tree Auto column tree Column position and moving Column adding and copying Column deleting Column width Column API

Rows
Row basics

Rows by functionality Rows by position Row name Row id Row index

Default rows

Description Example of default rows Example of changing default row Attributes

Row tree

Tree attributes Actions & API for expand / collapse

Row identification

Setting row id attribute Row id attribute in tree Row id created from cell values API for row ids

Row visibility
Row adding and copying

Five ways of adding rows to grid Adding and copying restrictions Adding new empty rows Copying existing rows

Row deleting Row moving and dragging Row selecting Row height Row API Space rows
Features
Sorting rows

Sort settings Controlling sort position Comparing strings Sorting actions Sorting API

Grouping rows to tree

Group settings Creating groups Comparing strings Created group rows <D Group='1'/> User interface to choose grouping Grouping actions and API

Filtering rows

Filter settings Comparing strings User interface to choose filter Filter actions and API

Searching in rows and cells

Search settings User interface for search Search actions and API

Printing grid

Print settings Choosing items to print Page size Print API

Print / export to PDF

Introduction Client side settings Printing options Client side API Server side API Data sent from client to server

Export to Excel or CSV

Introduction and export types Basic settings Styling export XLSX export Gantt export CSV export Old XLS / XHTML export Export API Communication with server Client export Server export

Import from Excel

Basic settings Sheets manipulation

Copy & paste rows via clipboard

Copy & paste permissions Copying to clipboard Pasting from clipboard

Master - detail grids

Introduction External master - detail grids Nested master - detail grids Synchronizing grids Other attributes for master - detail

Pivot tables

Pivot attributes & API Pivot formulas

External objects (custom JavaScript objects) Undo & Redo
Gantt and bar chart
Gantt objects

Gantt objects list Display settings Edit settings

Main bar

Definition of main bar and plans Main bar as Task Edit settings Main bar content and side html Tip on mouse hover Vertical position and height Style specific attributes API to manipulate Main bars Actions Side text (deprecated) Real Flow (deprecated)

Run bar

GanttRun Definition Extended definition Run bar as Task Edit settings Save format Selecting Run boxes Run box content and side html Tip on mouse hover Box identification Vertical position and height Style specific attributes Overlaid (Error) boxes Containers for more boxes Dragging - moving and resizing API to manipulate Run boxes Actions Run special formulas

Summary task

Main for Main Main for Run Editable Main Editable Run

Gantt icons - Flag & Point

Flag - icon with text Point - math points

Gantt display objects

Header - column captions Cell and column Background Vertical movable Line Mark & Progress line

Gantt zoom

Zoom options Chart size limits Zoom selection Paging in Gantt chart

Dependency, constraints & schedule

Introduction Data units Defining dependencies Dependency colors and shapes Changing dependencies Correcting dependencies Scheduling algorithm Project date constraints Task date constraints Critical path - Slack (Float)

Gantt calendars

Global base calendar Local calendar Calendar list Calendars dialog Other settings

Gantt resources

Resources list Resources assign Resources filter Resources calculations Availability chart Resource usage chart Generated resource usage chart

Gantt popup menu Gantt API
Line and XY points charts

Charts in grid cells Chart JSON definition Base chart settings Basic attributes Size Axis and caption Individual chart lines Data sources Visual settings API for standalone usage

Paging in large grids
Paging root rows

Paging types and attributes Auto adding root pages API for paging

Pager components

Side pager Side pager type Pages Side pager type Gantt Side pager type Custom Pager with navigation buttons & edit Pager as list of page indexes

Paging in tree

ChildPaging - load / render on expand MaxChildren - limit children count ChildParts - load / render on scroll

Paging columns

Paging types and attributes Auto adding column pages API for column paging

Server paging

Server paging for root rows Server communication in root paging Root paging in very large tables Server paging in tree Server communication in tree paging XML Request for Data in root paging XML Download Data in root paging XML Request for root Page / children XML Download root Page / children API for server paging

TreeGrid DLL/SO for server paging

Introduction Compatibility with TreeGrid control Using TreeGrid server DLL/SO ASP.NET C# ASP.NET VB PHP JSP Java TreeGrid server concepts Function reference Calculations

JSON menus and dialogs
JSON menu description JSON menu definition example
Menu settings

Base attributes Visual settings Key navigation Behavior Size and scroll

Menu item settings

Base attributes Clickable item Inactive caption Collapsible sub level Popup sub menu Columns Bool item Enum item Edit item

Custom menu in JavaScript

Show custom menu Custom menu position Custom menu advanced settings Custom menu JavaScript events Custom menu JavaScript methods

Calendar dialog Custom calendar & JavaScript events Custom dialog in JavaScript
Global grid settings
Grid size and scroll

Default behavior Maximize grid height and width Update size according to the content Let a user to control the grid size Widths of individual sections Other scrolling attributes and API

Media rules - responsive design
Languages

Language & regional setup (Text.xml) Translate texts dynamically Change language

Grid cursor - Focus & hover

Focused cell and row Focused cell range Move and copy focused cells Filling cell values by dragging Tabulator navigation Key navigation Cursor look - focus & hover

Selecting rows, cells and columns

Selecting base Selecting rows Selecting cells Selecting columns

Global settings

Status messages Configuration menus Configuration menu - options Configuration menu - columns Configuration menu - print / PDF Configuration menu - export Default toolbar Useful API function Help file

Animations

Animations base Row animations Column animations Cell animations Animations for undo / redo Animations for server side changes Dialog animations

Grid configuration in cookies
Mouse & key events & actions

List of event handler types TreeGrid mouse events Mouse event names Key and mouse button prefixes Touch event names Event targets Assigning event actions / callbacks Event action parameters Action name suffix Calling actions from JavaScript Creating custom actions Focused vs. Actual cell TreeGrid key events JavaScript API events

Mouse API event TreeGrid files
Debugging and testing

Debug window Automated testing

HTML and special types

TreeGrid documentation

Html type

Html type show in cell any HTML code as is without any change.
The HTML code must be fully valid. TreeGrid does not check the HTML code validity, the invalid HTML code can break down the whole grid layout!

HTML code in XML

To put HTML code into XML, you need to escape the '<' and '&' entities by &lt; and &amp; and if placed to XML attribute value also the '"' must be replaced by &quot;
If you include the XML data directly into HTML page, you have to escape the entities twice: '<' by &amp;lt; and '&' by &amp;amp; and '"' by &amp;quot;

Anchor links (<a href>)

Since 15.0 clicks to the <a href> links in the html code are handled the same as the Link attribute.
The links use the cell LinkBase and LinkTarget attributes and can be handles by the Link actions.

Editing HTML

The Html type is not editable by default. The editing must be explicitly permitted by CanEdit="1" for the cell or column or by EditHtml.
The Html type can be edited as plain text or plain HTML code according to EditHtml value.
<C> <cell> string

Type

["Text"] Type = "Html"
To define Html type, set column or cell attribute Type to "Html".
new 6.3 <C> <cell> string

EmptyValue

[""]
The HTML string displayed when the value is empty.
Usable especially for Select type or if used Button='Defaults' with Range='1'.
new 9.2 upd 15.0 <C> <I> <cell> string

Format

JSON named array of display values for particular cell values. All other cell values are displayed unchanged.
The items can contain HTML code. The names are case sensitive.
For example if <C Type="Html" Format = '{One:"Red", Two:"Green", Three:"<b>blue</b>"}'/> and the cell value is Two, it displays Green, if the cell value is Four, it displays Four.
Since 15.0 it is read also from row.
new 9.2 upd 15.0 <C> <I> <cell> string

EditFormat

Specifies format for editing - how the text will be modified for edit and the edited value back to data. For Html type is used especially for Defaults dialog to have name/key pairs.
JSON named array of input values for particular cell values. Format must start by '{'. All other cell values are edited unchanged. The items must not contain HTML code. The names are case sensitive.
For example if <C Type="Html" EditFormat = '{1:"one", 2:"two", 3:"three"}'/> and cell has value 2, the value for input will be two. If entered 'three', the cell value will be 3, if entered 'four', the cell value will be 'four'.
Since 15.0 it is read also from row.
new 13.0 <Cfg> int

EditHtml

[0]
If and how the Html Type cell will be edited. For Html edited by HTML editor use EHtml type instead.
0 - As Html and only if the cell has explicitly set CanEdit='1'.
1 - As Html always except if the CanEdit attribute is set to '0'.
2 - As Text always except if the CanEdit attribute is set to '0'.
3 - Like 2, but it asks before saving the value if the original value contained some Html code.

EHtml type (HTML editor) since 15.0

Included in SpreadSheet component
Html editable as CSS styled text in contentEditable tag.
EHtml type is available since 15.0.
EHtml type show in cell any HTML code as is without any change, it preserves also white space and CR/LF.
The HTML code must be fully valid. TreeGrid does not check the HTML code validity, the invalid HTML code can break down the whole grid layout!
Not fully available in Internet Explorer 9 and older!

HTML code in XML

To put HTML code into XML, you need to escape the '<' and '&' entities by &lt; and &amp; and if placed to XML attribute value also the '"' must be replaced by &quot;
If you include the XML data directly into HTML page, you have to escape the entities twice: '<' by &amp;lt; and '&' by &amp;amp; and '"' by &amp;quot;

Anchor links (<a href>)

Since 15.0 clicks to the <a href> links in the html code are handled the same as the Link attribute.
The links use the cell LinkBase and LinkTarget attributes and can be handled by the Link actions.

Images (<img>)

Images can be inserted by opening local files by system dialog or by dropping image files to the cell. The can be also copied and pasted via clipoboard.
It is also possible to resize the images by mouse dragging during editing.
For inserting images see Insert image.

Editing HTML by HTML editor

The EHtml type is editable by default and it is editable as HTML by (contentEditable) HTML editor.
Also Auto type can be edited with the HTML editor if set AutoHtml=1.

The HTML editor actions add and modify only <span> tags for style modifications, <a> tags for links, <img> tags for images and <br> tags for new lines.
The tags are not nested, only <a> tag can contain the <span>, <img> and <br> tags and <span> tag can contain the <br> tags.
On begin editing all tags are made root to not be nested. All tags <b>, <i>, <strong>, <em>, <u>, <strike>, <sup>, <sub> and <font> are converted to <span> tags with appropriate style. Tags <div> are converted to <span> and separated by one <br>, tags <p> are converted to <span> and separated by two <br>.

The HTML editor permits these actions:
Enter - Enter key (depending on AcceptEnters settings) creates new line by <br> tag.
Bold - both actions BoldOn / BoldOff switch selected text or text from cursor between bold and normal. Adds / removes <b> tag in the source.
Italic - both actions ItalicOn / ItalicOff switch selected text or text from cursor between italic and normal. Adds / removes <i> tag in the source.
Underline - both actions UnderlineOn / UnderlineOff switch selected text or text from cursor between underlined and normal. Adds / removes <u> tag in the source.
Strike - both actions StrikeOn / StrikeOff switch selected text or text from cursor between strikeout and normal. Adds / removes <strike> tag in the source.
Superscript - action VAlignTop switches selected text or text from cursor between superscript (small text above) and normal. Adds / removes <sup> tag in the source.
Subscript - action VAlignBottom switches selected text or text from cursor between subscript (small text below) and normal. Adds / removes <sub> tag in the source.
Background color - actions SetColor, ChooseColor and NoColor set background color of selected text or text around cursor. Adds / removes <font style='background-color:xxx'> tag in the source.
Text color - actions SetTextColor, ChooseTextColor and NoTextColor set text color of selected text or text around cursor. Adds / removes <font style='color:xxx'> tag in the source.
Text shadow color - actions SetTextShadowColor, ChooseTextShadowColor and NoTextShadowColor set shadow color of selected text or text around cursor. Adds / removes <font style='textShadow:0px 0px 5px xxx'> tag in the source.
Text size - actions SetTextSize, ChooseTextSize and NoTextSize set font size of selected text or text around cursor. Adds / removes <font style='font-size:xxx;line-height:xxx'> tag in the source.
Text font - actions SetTextFont, ChooseTextFont and NoTextFont set font face of selected text or text around cursor. Adds / removes <font style='font-family:xxx'> tag in the source.
Clear style - action ClearStyle removes all styles from selected text.
Insert image - action OpenImage. The image files can be also dropped to the cell, see InsertImg setting.
Copy to clipboard - action Copy copies selected text to clipboard.
Cut to clipboard - action Exclude copies selected text to clipboard and deletes it.
Upper case - action UpperCase converts selected text to upper case.
Lower case - action LowerCase converts selected text to lower case.

By default the focused and edited cell has preset global background and text colors. To always show cell colors instead remove Class and Color from FocusCell attribute value, e.g. <Def><D Name='R' FocusCell='Border'></Def>.
<C> <cell> string

Type

["Text"] Type = "EHtml"
To define EHtml type, set column or cell attribute Type to "EHtml".
new 6.3 <C> <cell> string

EmptyValue

[""]
The HTML string displayed when the value is empty.
new 9.2 upd 15.0 <C> <I> <cell> string

Format

JSON named array of display values for particular cell values. All other cell values are displayed unchanged.
The items can contain HTML code. The names are case sensitive.
For example if <C Type="EHtml" Format = '{One:"Red", Two:"Green", Three:"<b>blue</b>"}'/> and the cell value is Two, it displays Green, if the cell value is Four, it displays Four.
Since 15.0 it is read also from row.
new 9.2 upd 15.0 <C> <I> <cell> string

EditFormat

Specifies format for editing - how the text will be modified for edit and the edited value back to data. For Html type is used especially for Defaults dialog to have name/key pairs.
JSON named array of input values for particular cell values. Format must start by '{'. All other cell values are edited unchanged. The items must not contain HTML code. The names are case sensitive.
For example if <C Type="EHtml" EditFormat = '{1:"one", 2:"two", 3:"three"}'/> and cell has value 2, the value for input will be two. If entered 'three', the cell value will be 3, if entered 'four', the cell value will be 'four'.
Since 15.0 it is read also from row.
new 15.0 <Cfg> bool

AutoHtml

[0]
If set, the Auto type uses EHtml type instead of Lines type for the texts.

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.

Since 15.0 the Icon type can accept local files dropped to the cell or opened by system open file dialog, see Insert image.
<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!
new 6.0 <C> <cell> string

Align

["Center"]
How the image will be aligned. Case insensitive keyword: "Left", "Right", "Center".
new 15.0 <C> <cell> int

IconSize

[0]
How the image will be resized / shrunk according to the cell size.
0 - no
1 - contain - resize the image to be displayed whole
2 - cover - resize the image to cover the whole cell, but preserve aspect ratio
3 - fill - resize the image to cover the whole cell regardless on aspect ratio
new 6.0 API event bool

OnIconClick

(TGrid grid, TRow row, string col, int x, int y)
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".
chg 6.0 upd 7.0 <cell> string

value

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, yposition relative to left top cell edge.
width, heightsize 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).
htmlany HTML code displayed on the position
clsCSS class for the tag
styleinline 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 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.
upd 15.0 <C> <I> <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
1does not insert ItemPrefix before the first item and ItemNPostfix after the last item
2escape 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'
Since 15.0 it is read also from row.

Editable Link type

The clicks to Link type are handled the same as in Link, see the events and actions at Link attribute.
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 inline in the cell as part of the cell value, 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". If not set, it is used LinkTarget
upd 15.0 <C> <I> <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
Since 15.0 it is read also from row.
upd 15.0 <C> <I> <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
Since 15.0 it is read also from row.
<Cfg> string

BaseUrl

String added before urls in types Img and Link, if their format specifies it.
deleted 15.0 <XML event> bool

OnClickLink

(TGrid Grid, TRow Row, string Col, TEvent Event)
Deprecated since 15.0. Since 15.0 the Link type click is handled the same as Link attribute.
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.

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.

Since 15.0 the Img type can accept local files dropped to the cell or opened by system open file dialog, see Insert image.
<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_URLURL with picture to display,
width, height,Size of the image
left, topPosition of the image inside its source image, to display only part of the image, must be set with width and height.
link_URLlink to page displayed after click to image. The click to link is handled the same as to Link attribute.
link_windowbrowser 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"
upd 15.0 <C> <I> <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
Since 15.0 it is read also from row.
upd 15.0 <C> <I> <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
Since 15.0 it is read also from row.
<Cfg> string

BaseUrl

String added before urls in types Img and Link, if their format specifies it.

DropCols type

Special interactive cell to drag column captions or other such values 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 DropCols type, set column or cell attribute Type to "DropCols".
upd 9.2 <Space> <cell> string

value

Cell value contains comma separated array of names.
Since 9.2 it can contain any strings, not only column names.
new 9.2 <Space> <cell> string

Format

JSON named array of display values for particular cell values. All other cell values are displayed unchanged.
The items can contain HTML code. The names are case sensitive.
For example if XXXType="DropCols" XXXFormat = '{One:"Red", Two:"Green", Three:"<b>blue</b>"}' XXX='Two,Four'/> it displays 'Green Four'.
new 9.2 <Space> <cell> int

MinItemWidth

Minimal width (in pixels) of every cell tab.
If the cell tab is column name, it uses the column width, but between MinCellWidth / MaxCellWidth
new 9.2 <Space> <cell> int

MaxItemWidth

Maximal width (in pixels) of every cell tab.
If the cell tab is column name, it uses the column width, but between MinCellWidth / MaxCellWidth
new 9.2 <Space> <cell> int

AutoWidth

[1]
If and how the item widths will be updated, bit array.
&1The width will be shrunk if the sum is wider than the cell width.
&2The width will be extended if the sum is more narrow than the cell width.
&4If the item is column name, the column width will be ignored.
new 9.2 <Space> <cell> bool

CanAdd

[1]
If it is possible to drop to this row an item dragged from outside (from another row or columns header).
new 9.2 <Space> <cell> int

CanDelete

[1]
0 The item cannot be deleted (does not affect moving to another row, see CanMove).
1 Item is deleted if moved outside any row.
2 Item is deleted if moved outside any row or to place where it is not accepted.
new 9.2 <Space> <cell> int

CanMove

[3]
0 No moving items inside and outside the row (only deleting or copying or adding, if permitted by other attributes)
1 It is possible to move the items inside the same row. After such move the item is just placed to another position in the same row. Ignored for CanCopy=1/3
If not set in destination row (when moving between rows), it is possible to only add items to the end of the item list.
2 It is possible to move the items outside the row (to another row). After such move the item is removed from this source row. Ignored for CanCopy=2/3
3 Both moving inside and outside is permitted.
new 9.2 <Space> <cell> int

CanCopy

[0]
0 No copying items inside and outside the row (only deleting or moving or adding, if permitted by other attributes)
1 It is possible to copy the items inside the same row. After such copy the item is duplicated to another position in the same row. Only if also Duplicates is permitted.
2 It is possible to copy the items outside the row (to another row). After such copy the item remains also in the source row.
3 Both copying inside and outside is permitted.
new 9.2 <Space> <cell> int

Duplicates

[ ]
If items with the same names are permitted in this row.
Empty - It permits duplicated column name like 1, if the column has set GroupMore; for other items (not column names) it permits duplicates like 2.
0 - Never.
1 - Yes, but not next to the same item.
2 - Yes, everywhere.
new 9.2 <Space> <cell> string[ ]

Accept

Comma separated list of item names that can be dropped to this row.
If not set, all items can be dropped here.
new 9.2 <Space> <cell> string[ ]

Single

Comma separated list of DropCols cells in format: rowid1,col1,rowid2,col2,rowid3,...
If set it checks these cells for presence of the dragged value according to the SingleType.
The Single must not contain actual cell.
new 9.2 <Space> <cell> int

SingleType

[2]
0 - Single ignored
1 - A value must be present maximally once in the cells (can be deleted).
2 - A value must be present exactly once in the cells.
3 - A value must be present minimally once in the cells (can be added).
<Space> <cell> string

Text

["To group by drag columns here"]
A text displayed on empty area inside cell
new 9.2 <Space> <cell> int

MinTextWidth

[40]
Minimal width of the Text item part. In pixels
<Space> <cell> bool

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).
new 9.2 API event int

OnDropCols

(TGrid grid, TRow row, string col, string value, TGrid togrid, TRow torow, string tocol, int topos, bool drop)
Called while dragging some item from DropCols and also on drop this item to some place.
grid, row, col is the source grid and cell.
value is the DropCols item name being dragged.
togrid, torow, tocol is cell under mouse cursor. Now it is not possible to drag to another grid, so the togrid = grid.
topos is actual position where the item will be dropped. Or -1 means delete item, -2 ignore action.
drop is true when the item is being dropped. The event is called once on the end with drop = 1.
Return null to not change anything or new topos value.

Upload File type

Type to select file(s) from local disk to upload them to server and / or display them in the cell.
Not available in Internet Explorer 9 and older!

The File Type cell by default shows right side Button="File". If the cell value is not empty, it automatically shows also left side Icon="Clear".
To not show the side button / icon, set the Button/Icon to different button or empty string.

The File Type cell accepts also files dropped by mouse to the cell if set DropFiles.

The files are uploaded to server as standard <input type="file"> value under name "rowid$columnname".
If more files are uploaded for one cell, the next files have names "rowid$colname$index", with index starting 1. Note, the first file is without the index.
On server they are accessible: In ASP.NET in Request.Files collection, in PHP in $_FILES, in JSP by request.getPart() method.
new 12.0 <C> <cell> string

Type

["Text"] Type = "File"
To define File type, set column or cell attribute Type to "File".
new 12.0 chg 15.0 <cell> string

value

Cell value contains an array of inserted file objects. It is the only cell value in TreeGrid assigned by reference and not by value.
To access the actual files for upload by API use row[col] as the file list array like in the standard <input type='file'> files array.
This cell value is uploaded to server separately as files under name.
Before 15.0 the cell value contained the <input type='file'> DOM object, so the files were accessible as row[col].files, since 15.0 they are accessible as row[col].
new 12.0 upd 15.0 <C> <I> <cell> string

Format

Used to display the selected files in the cell.
It can contain any html code with some specific keywords to be replaced by the files attribute.
*Name*File name with extension, but without the full path.
*Type*File type, e.g. "image/gif".
*Size*File size in bytes.
*Url*Url of image or video file to display e.g. in <img> tag or in some tag background. Not available in IE9 and older browsers!
*Height*Height of the cell in pixels.
*Width*Width of the cell in pixels.
For example: Format="*Name* &lt;img src='*Url*' height='*Height*' width='*Height*'>"
Since 15.0 it is read also from row.
new 12.0 <C> <cell> string

Separator

HTML code that separates individual files defined by Format attribute.
Default value is ValueSeparatorHtml defined in <Lang><Format> in Text.xml.
new 12.0 upd 15.0 <C> <cell> int

Range

If set to 1, it permits selecting more files, otherwise only one file.
Since 15.0 If set to 2, the files are added to the previous files array, to the end.
new 12.0 <C> <cell> string

Accept

File types that can be selected. The value is the same as <input type='file' accept> attribute.
It can be "audio/*" or "video/*" or "image/*" or any MIME type.
new 12.0 chg 15.0 API event bool

OnSetFile

(TGrid grid, TRow row, string col, object[] files)
Called after the file dialog was closed.
files is array of files to add / insert. It is possible to change the array, especially remove individual items.
Prior to 15.0 the files was <input type='file'>
Return true to cancel the action, false to continue. Prior to 15.0 the return true cleared the cell, since 15.0 clear the cell by setting files.length = 0 and return false.
Here you can restrict choosing some files, e.g. too long files:
Grids.OnSetFile = function(G,row,col,input){
for(var i=0;i<input.files.length;i++) if(input.files[i].size>100000){ alert("too large file"); return true; }
}
new 12.0 <Actions>

ShowFile ...FAO

Attached to events OnClickSideFile, OnEnter, OnCtrlDown
Shows the system dialog to select one or more files for the cell.