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) Upgrading from 9.3 to 10.0 Upgrading from 5.9 to 6.0

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 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 Defaults list Suggest list (auto complete) 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) 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

Cell types
Auto 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 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 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 Basic settings Communication with server Export API 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 (like Adobe Flash) 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
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 Language & regional setup (Text.xml) 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 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

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; and '&' 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".
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 <C> <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.
new 9.2 <C> <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="Text" 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'.
new 11.0 <Cfg> int

EditHtml

[0]
If and how the Html Type cell will be edited.
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.

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!
new 6.0 <C> <cell> string

Align

["Center"]
How the image will be aligned. Case insensitive keyword: "Left", "Right", "Center".
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, heightize 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.
<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
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'

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_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
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"
<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 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 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 <cell> string

value

Cell value contains the <input type='file'> DOM object. 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].files as the file list array like in the standard <input type='file'>.
This cell value is uploaded to server separatelly as files under name.
new 12.0 <C> <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*'>"
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 <C> <cell> bool

Range

If set to 1, it permits selecting more files, otherwise only one file.
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 API event bool

OnSetFile

(TGrid grid, TRow row, string col, object input)
Called after the file dialog was closed.
input is actual <input type='file'> tag for the cell. Do not modify it.
Return true to clear the cell, false to continue.
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 ...F

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