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 React Vue Other frameworks NodeJS server

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 (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
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

Cells

TreeGrid documentation

Cell type

<C> <cell> string

Type

["Text"]
Cell type. Specifies the basic behavior of the cell. How it will be displayed, edited, calculated sorted, filtered and so on.
Editable types
TextOne line text, formatted, edited in <input>.
LinesMulti line text, formatted, edited in <textarea>, can accept Enters.
IntInteger number, formatted, edited in <input>
FloatFloating point number, formatted, edited in <input>
DateDate and / or time, formatted, edited in <input> or selected from popup calendar.
PassPassword. It is displayed as “***”, editing in <input type="password">.
ImgEditable image. Displayed as <img> tag or as background image in <div>. For simple not editable image use Icon type.
LinkEditable link to any url. For simple not editable link use Link attribute with any type.
Changeable types
BoolBoolean value 1 and 0 – it is displayed and edited as checkbox.
RadioEnumeration with radio buttons instead of combo box. Displayed and edited as radio buttons or checkboxes.
EnumCombo box to select one or more values from menu.
SelectCell with predefined values chosen from menu. It is shortcut for Button of type Defaults with non-editable Html cell.
Button types
ButtonOne button in cell: clickable button, switch button, radio / tab button, menu button, combo switch button, combo radio / tab button.
PanelOne or more clickable buttons in cell.
Special interactive types
PagerSpecial simple pager cell, only for Space rows.
Displays buttons GoFirst,GoPrevious,GoNext,GoLast and editable cell with page number and number of pages.
PagesSpecial simple page links, displays links for all pages as numbers from 1.
DropColsDrop target to drag column names here. Only for cell in Space rows.
GanttInteractive Gantt chart. This type must be used for tag only.
Not editable HTML types
HtmlAny HTML code displayed as is.
IconSimple image.
AbsHTML elements absolutely positioned inside the cell in layers. It does not affect row height, it is always overflowed.
ListList of items to build an HTML string.
API event string

OnGetType

(TGrid grid, TRow row, string col, string type)
Called whenever grid reads the cell type to change the Type dynamically. It must be very fast.
Return new type or type.
API method string

GetType

(TRow row, string col)
Returns cell Type in string. It just reads all appropriate Type attributes and calls OnGetType.
new 8.0 <C> <cell> int

Simple

[0]
Use to speed up rendering of simple cells without the most TreeGrid attributes. Bit array.
It has sense only in large grids with many simple cells like numbers, dates or simple strings or HTML.
If set to whole column <C>, it is used only for variable cells, not fixed.
1.bit (&1)Ignores attributes: CanFocus, CanEdit, Class, NoColor, Color, Background, Wrap, Align, Visible, Link, HtmlPrefix, HtmlPostfix, ClassInner, Rotate.
2.bit (&2)Sets CanEdit value for bit 1. It means Simple = 1 for not editable cells, Simple = 3 for editable cells.
3.bit (&4)Ignores Button and Icon and does not show any side button for Enum and Date.
4.bit (&8)Ignores Format and Type specification, use only for simple not formatted texts or numbers.
For example Simple = 7 shows simple editable cell without side button. Simple = 9 shows simple not editable, not formatted text, but possibly with side button.
new 13.3 <Cfg> bool

Rtl

[0/1]
If TreeGrid is in RTL mode (right to left direction, for Middle East languages). In RTL mode TreeGrid is horizontally reversed, cells go from right to left and their texts are also in RTL.
It is automatically set if some TreeGrid parent tag or <body> has set dir='rtl'.
new 13.3 <C> <cell> int

Rtl

[ ]
If the cell is in RTL mode (right to left).
Set it to 0 to switch the cell to LTR (normal left to right direction) if grid is in RTL mode. Useful for entering numbers and dates that are always in LTR also in Middle East languages.
Set it to 1 to switch the cell to RTL if grid is not in RTL mode. Useful to display and edit some text in RTL direction.
Set it to 2 to switch the cell to RTL if grid is not in RTL mode. Editing is still in LTR mode, right aligned.

Cell format

Cells are formatted according to its type. Individual formats are described in individual types documents.
upd 15.0 <C> <I> <cell> string

Format

Specifies a cell format for display. Its presence, meaning and structure varies according to the cell type therefore the formats are described for individual types.
See text format (Text, Lines, Pass), number format (Int, Float), Date format, Html format, Img format, Link format, List format, DropCols format.
Since 15.0 it is read also from row.
upd 15.0 <C> <I> <cell> string

EditFormat

Specifies cell format for editing. Its presence, meaning and structure varies according to the cell type therefore the formats are described for individual types.
See text edit format (Text, Lines, Pass), number edit format (Int, Float), Date edit format, Html edit format, Img edit format, Link edit format.
Since 15.0 it is read also from row.
API event string

OnGetFormat

(TGrid grid, TRow row, string col, string format, bool edit)
Called to get cell format dynamically. Returns new format or format. It must be very fast.
If edit is false, it should return standard format, for true it should return format for editing.
API method string

GetFormat

(TRow row, string col, bool edit = false)
Returns Format string for given cell. If edit is true, returns EditFormat. Calls also OnGetFormat.

Dynamic format

See also auto Type Auto.
new 12.0 chg 15.0 <Cfg> int

DynamicFormat

[0]
If the cell Type, Format and other such attributes can be changed dynamically by users or automatically according to the cell value.
0 - no

1 - yes
The cell format can be dynamically changed by users using actions SetFormat... and ChooseFormat....
It shows also Format combo cell on toolbar.

2 - yes + auto type
Since 13.0 it is replaced by Type Auto.
Since 15.0 it cannot be used in grid with Type Auto.
Like 1 and also chooses cell Type according to cell value.
The Type is chosen: on grid load, after value is edited by a user, after value is calculated by editable formula.
If the Type is changed, it resets also other cell attributes according to TextFormat, NumberFormat or DateFormat.
new 12.0 upd 13.0 <Cfg> TMenu

Formats

[...]
JSON menu definition with all available formats to be set to cells.
The definition is "{Items:[{format1},{format2},...]}" where formatx object defines these attributes:
Name - unique name of the format definition. It is shown in Format combo value on toolbar; it is use in Format, DateFormat, NumberFormat and TextFormat attributes. Name can be '-' for menu item separator.
Text - menu item text shown in the popup menu or list with the formats.
Type - cell Type attribute; it is set to cell when format item is chosen or by action SetFormat when Format contains this menu item Name. It is ignored for cell type Auto.
Format, EditFormat, EditMask, ResultMask and similar attributes are set to the cell like the Type attribute.
Default value of Formats see in Defaults.xml file.

Since 13.0 it can contain special named items (the attribute Name starts by "@"):
Name="@Enter" - A user can enter custom format string that is used as is in the cell Format attribute.
Name="@Custom" - A item with submenu showing all custom formats in grid and added custom formats. The item must have attributes Menu and Items.
Name="@Refresh" - A user can clear all unused custom formats, it lists only formats used in grid cells.
new 12.0 <Cfg> string

Format

[...]
Predefined format Name from Formats that will be set to cell(s) by SetFormat... action.
new 12.0 <C> <I> int

NoFormat

[0/2]
If the format can be set dynamically or automatically in the row or column cells.
0 - both automatically and dynamically (like DynamicFormat=2)
1 - only dynamically by users, not automatically according to the cell value (like DynamicFormat=1)
2 - never (like DynamicFormat=0).
By default it is 2 for Header and Panel rows and Index and Panel columns and 0 for other rows and columns.
new 12.0 <Format> string

TextPrefix

[']
Starting cell value by this character forces its auto type to "Text" or "Lines".
This first character is not displayed in the cell. Default is apostrophe.
In Auto type it forces to always display the value as string regardless on its Format.
new 13.0 API method string

FindFormat

(TRow row, string col, string format, string default)
Searches the cell Type and Format in formats menu and returns the item Name if found. Otherwise returns default.
formats has the same format as Formats.
new 13.0 API method string

AddCustomFormat

(string format, string name = null)
Adds given format string to the Formats value, as a child of the @Custom item.
If the name is set, sets it to the item Name, otherwise the format is set also to the Name.
The format and name can be also arrays to add more items at once.
new 12.0 <Actions>

SetFormat ...FSARCWO

Attached to Toolbar cell Format OnChange and OnSame events
Sets attributes chosen by Format in Formats to TextColor in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 <Actions>

ChooseFormat ...FSARCWO

Not attached to any event
Shows menu with items in global Formats. If used in Menu, shows submenu with the global Formats.
And sets format chosen in the menu to Format in actual or focused cell or in all focused cells or in all selected cells.
new 12.0 deleted 15.0 <Actions>

SetFormatCells

,

SetFormatSelected

,

ChooseFormatCells

,

ChooseFormatSelected ...F

Not attached to any event
Replaced by SetFormat / ChooseFormat.

Dynamic type

Since 13.0 it is replaced by Type Auto.

Dynamic type is active if set <Cfg DynamicFormat="2"/>.
It is used for types Text, Lines, Int, Float and Date. It is not used for Auto type.
new 12.0 <Cfg> string

TextFormat

[...]
Predefined format Name from Formats that will be set to cell(s) when auto choosing the cell Type as "Text" or "Lines" due DynamicFormat='2'.
new 12.0 <Cfg> string

NumberFormat

[...]
Predefined format Name from Formats that will be set to cell(s) when auto choosing the cell Type as "Int" or "Float" due DynamicFormat='2'.
new 12.0 <Cfg> string

DateFormat

[...]
Predefined format Name from Formats that will be set to cell(s) when auto choosing the cell Type as "Date" due DynamicFormat='2'.
new 12.1 <Cfg> int

NoDateNumber

[0]
When it is restricted to convert cell type to Date for DynamicFormat = 2 0 - the type is set as Date if it is positive number less than 4e12, the cell Type is not Float and it is not called from calculating editable formula. Or if the value is a date string (containing only numbers, spaces and date/time separators).
1 - the type is set as Date only if the value is a number and cell Type is Date or the value is a date string.
2 - the type is set as Date only if the value is date string.
3 - the type is never set as Date automatically.
new 12.0 upd 12.1 API event string

OnFindType

(TGrid grid, TRow row, string col, string type, type val, bool calc)
Called to choose cell Type according to the value val. type is suggested Type.
Return new Type according to the value val, permitted types are now "Text", "Lines", "Int", "Float" and "Date".
It is called from FindType method.
(new 12.1) If set calc=1, it is called when calculating editable formula.
new 12.0 upd 12.1 API method string

FindType

(TRow row, string col, type val, bool refresh = 0, bool calc = 0)
Chooses cell Type according to the value val.
Chooses the cell type as text, number or date, reads the TextFormat, NumberFormat or DateFormat and sets all its attributes from Formats to the cell.
Returns the chosen cell Type.
If set refresh=1, refreshes the cell HTML to show the changes.
(new 12.1) If set calc=1, it means calculated from edit formula, it is less restrictive in changing Float to Date.

Cell value

<cell> string

[value]

Uploaded to server when Added or Changed, supports Undo
Cell value in the row. It cannot be set into the whole column, to preset default value to more or all rows in some column use default <D> rows.
The value is not an attribute name! The cell value is set as assignment to column name in row, e.g <I Col1=’value of col1’ Col2=’value of col2’ Col2CanEdit=’0’/>.
Floating point numbers always use ‘.’ as decimal separator and no thousands separator.
Date and time values are in XML in string in English format (M/d/yyyy HH:mm:ss) and in API are in number of milliseconds from 1.1.1970 00:00:00.000.
By API you can read the value by GetValue, GetString or by global functions Get or Is.
By API you can set SetValue / SetString. You can set the value also directly by row[col] = val, but without any update and refresh.
upd 13.0 API event type

OnGetHtmlValue

(TGrid grid, TRow row, string col, type val)
Called to get formatted HTML cell value to display. val is unformatted cell value.
Return formatted value as HTML string. If returned value is not null, it is used instead of internal formatting by Format or Enum attributes.
Return null to use default formatting behavior.
Since 13.0 return an array as [value,type,format] to change some or all of the attributes. The value is raw value to be formatted by given or default type and format.
API method type

GetValue

(TRow row, string col)
Returns cell value as number or string. For date returns internal format (count of msec from 1/1/1970).
The cell value can be set by SetValue method.
API method string

GetString

(TRow row, string col)
Returns cell value as string, in standard format (non editing).
The cell value as string can be set by SetString method.
new 13.0 API event string

GetStringEdit

(TRow row, string col)
Returns cell value as string for editing. If the cell contains EFormula, it returns the EFormula starting by '='.
new 6.4 API method void

StartUpdate

( )
Call it before mass update of cell values, adding more rows, showing / hiding more rows and so on.
It disables calculations, updating layout, uploading changes with AutoUpdate and updating Gantt chart. It also starts Undo block.
It is possible to nest blocks StartUpdate / EndUpdate - only the call of the most outer block's EndUpdate will enable updating.
new 6.4 API method void

EndUpdate

(TRow row = null, string col = null)
Call it after the action for StartUpdate finished.
It enables calculations and recalculates grid. If set row and col it recalculates grid like after change the cell, otherwise it recalculates the whole grid.
It updates grid layout by calling Update.
It enables AutoUpdate and uploads changes to server. If set row, it uploads only changes in the row, otherwise it uploads all changes.
It updates Gantt chart and dependencies.
It closes actual Undo block, all actions within StartUpdate and EndUpdate will be undone or redone together.

Reading / writing attributes by API

global func. type

Get

(TRow row, string attribute)
Returns value of row’s attribute. Remember, all attributes are often of string types. If the row has not this attribute set, it returns default value from its default row.
To get cell attribute use Get(row,col+"attribute"), e.g. Get(row,"Col1CanEdit")
global func. bool

Is

(TRow row, string attribute)
Returns true if row’s attribute has positive value or returns false for 0, null or empty string. Remember, all attributes are often of string types.
If the row has not this attribute set, it returns default value from its default row.
new 6.0 API method string

GetAttribute

(TRow row, string col, string attribute)
Returns a cell (<I>), row (<I>) or column (<C>) attribute, in this order.
If row is null, returns only column attribute.
If col is null, returns only row attribute.
If attribute is null, returns cell value as internal value. To get cell value as string use GetString method.
Example: grid.GetAttribute(row,col,"CanEdit");
new 6.0 upd 6.4 API method void

SetAttribute

(TRow row, string col, string attribute, string value, bool refresh, bool undo)
Sets a cell (<I>), row (<I>) or column (<C>) attribute to the value and refreshes it.
Remember, not all attributes can be set via this method! If there exists a direct API method for setting the attribute, use it instead !
If row is null, sets only column attribute. In this case the refresh of the whole column can be slow!
If col is null, sets only row attribute and refreshes the whole row.
If attribute is null, sets cell value via SetString method.
If set undo adds the change to Undo and can undone and redone. If called for cell value, the undo is always 1.
Example: grid.SetAttribute(row,col,"CanEdit",0,1);

Cell HTML

API method void

RefreshCell

(TRow row, string col)
Refreshes cell’s html element, re-renders the whole cell.
Call it after any change that affects the cell, like when you directly set its value by row[col] or any attribute by row[col+attribute]
API method void

RefreshRow

(TRow row)
Refreshes row’s html element, re-renders whole row.
Call it after any change that affects the whole row, like changing its Class.
The API functions for changing rows like DeleteRow do the changes automatically.
It is faster than refreshing all cells in row by RefreshCell.
chg 6.0 API method object

GetCell

(TRow row, string col)
Returns HTML cell element, tag <td>.
Don’t change the HTML directly! To change the cell content use some grid method to change data and call RefreshCell.
You should use this method only if you really know what are you doing.
Remember, TreeGrid can anytime re-render the cell and any your custom changes done in the HTML will be lost.

Cell default

new 14.0 renamed 15.0 <cell> string

CellDef

Since 15.0 renamed from Def to CellDef
Name of default cell to read the cell undefined attributes from.
Use especially for special rows like Filter or Space to predefine more similar cells.
Don't set it in many rows, it can remarkably slow down the initialization. Set it only in default rows and fixed rows.
The default cell is defined as D tag in the same Def array as default rows.
The default cell can contain only cell / column attributes without column name prefix.
The cell attributes are read from the default cell on start, therefore changing the default cell later by API has no effect for existing cells.

For example:
<Def><D Name='CellFilter' Edit='0' Button='Defaults' Defaults='|*FilterOff|*RowsAll' DefaultFilter='1' ShowMenu=0'/></Def>
<Head><Filter ACellDef='CellFilter' CCellDef='CellFilter' GCellDef='CellFilter/></Head>
new 14.0 deleted 15.0 <cell> string

Def

Renamed to CellDef.
new 14.0 <I> <D> string

CellDef

Name of default cell to read all the row cells' undefined attributes from. The same as cell Def, but for all the row cells together.
If the cell has defined Def attribute and the row has defined CellDef attribute, both the Def and CellDef are applied, the CellDef is applied first.
Use especially for special rows like Filter or Space to predefine more similar cells.
Don't set it in many rows, it can remarkably slow down the initialization. Set it only in default rows and fixed rows.
new 14.0 <Cfg> bool

AddColCellDef

[0]
By default if added new column the Def and CellDef attributes in existing rows are processed only in default rows and fixed rows.
If set AddColCellDef='1' it process the Def and CellDef also in all existing variable rows.

Range or more values in one cell

<C> <cell> bool

Range

[0]
If the cell accepts a range or more values. Usable especially in filter cell or in Gantt source cells.
Cell types Int, Float and Date accept more values separated by ';' and range of values separated by '~'. For example "1;3~7;12;16~33" or "1/1/2000~3/3/2000;1/1/2007".
Calendar component for selecting date supports selecting more dates or range of dates by mouse drag.
Cell types Enum and Select can select more values from combo box. Defaults dialog supports selecting more values for any cell type.
Cell types Text and Lines accepts more strings separated by ';'.
The characters ';' and '~' can be changed by <Lang><Format ValueSeparator=';' RangeSeparator='~'/></Lang>
The range value should not be used as input for calculations, because formulas treats is as single string.
Sorting of range value is done only according to the first value ascending and the last value descending.
Filtering is done only according to the first value.
Search and group treat the range value as single string.
<Format> string

ValueSeparator

[;]
Separator to separate individual values in Range cell. This separator must not be contained in any individual value.
This separator is used in the value itself and for editing.
The default is semicolon.
upd 9.0 <Format> string

ValueSeparatorHtml

[; ]
A string displayed in cell instead of ValueSeparator in Range cell.
The default is semicolon + space.
It is displayed in Int, Float, Date. Since 9.0 it is displayed also in Enum and Html type.
It is not displayed in Text and Lines type, use their Format attribute to change the separator, e.g. Format="||||\;|g| ... "
<Format> string

RangeSeparator

[~]
Separator to separate the bounds in Range cell. Used only for number types: Int, Float and Date.
This separator is used in the value itself and for editing.
The default is tilde.
<Format> string

RangeSeparatorHtml

[ ~ ]
A string displayed in cell instead of RangeSeparator in Range cell. Used only for number types: Int, Float and Date and for Html type.
The default is space + tilde + space.

Cell with link URL

Cells can display their content as clickable link (<a href>).
Since 15.0 the link can be also edited by SetLink action.
By default the links are followed on click if the cell is not editable and by ctrl+click for all cells. It can be changed by attaching ShowLink / CancelLink actions to other events.
Only types Html, EHtml, Img, Text, Lines, Int, Float, Date and Auto can have a link.
Html type cell value can contain <a href> tags that handled the same as the Link attribute.
new 6.0 upd 15.0 <C> <cell> string

Link

The link URL (<a href>). If set, the cell has a link and browser will be navigated to this link after click to the link.
Remember, the cell must not be editable to process the link click or the editing must not be started on click.
Since 15.0 it can be also reference to another cell in (another) sheet like "B3" or "'Sheet 1'!C5".
new 6.0 chg 15.0 <Cfg><C> <cell> string

LinkTarget

The link target (<a target>). Name of browser window to open the link here.
It can be "_blank" to open in new window or "_top" to open in main frame.
By default the link opens in the same window.
Since 15.0 the LinkTarget can be set also in <Cfg> tag.
Since 15.0 it affects all links in grid, the Link attribute, links in Link and Img types and anchor links in Html and EHtml types.
new 6.0 chg 15.0 <Cfg><C><cell> string

LinkBase

Link base url prefix.
This string is added before the Link. To easily change an url of more links together.
Since 15.0 it affects all links in grid, the Link attribute, links in Link and Img types and anchor links in Html and EHtml types.
chg 15.0 <Actions>

ShowLink ...FA

Attached to events OnClickCell, OnCtrlClickCell, OnCtrlClickNoFocus, OnEnter
Navigates to URL in Link or Img type or attribute Link in actual or focused cell.
It navigates also to clicked anchor tag <a>...</a> in Html, EHtml or List type. In focused cell it navigates to the first anchor tag in the cell.
Prior to 15.0 it could be called only for links in type Link and Img.
In actual cell it fails if mouse is not above anchor tag.
new 15.0 <Actions>

ShowCellLink ...FA

Not attached to any event
The same as action ShowLink, but it does not fail if mouse is not above anchor tag.
new 15.0 <Actions>

CancelLink

Not attached to any event
Cancels default browser navigation to clicked anchor tag.
TreeGrid does not prevent default action of onclick event and thus permits navigation of clicked anchor tags.
new 15.0 <Actions>

CancelLinkEdit

Attached to events OnClickCell and OnDblClickCell
Cancels default browser navigation to clicked anchor tag if the cell is editable.
TreeGrid does not prevent default action of onclick event and thus permits navigation of clicked anchor tags.
By default this event is attached to OnClickCell event with ShowLink event to prevent opening anchor links by default browser action and open them by the ShowLink action instead, for not editable cells.
new 15.0 <Actions>

SetLink ...FSARCWO

Attached to event OnClickButtonSetLink
Lets a user to enter or clear Link in actual or focused cell or in all focused cells or in all selected cells.
If called in edit mode in EHtml type, it sets or clears a link for selected text.
new 15.0 <Actions>

ClearLink ...FSARCWO

Not attached to any event
Clears Link in actual or focused cell or in all focused cells or in all selected cells.
If called in edit mode in EHtml type, it clears a link for selected text.
chg 15.0 API event bool

OnLinkClick

(TGrid grid, TRow row, string col, string url, string target)
It is called for every anchor link click handled by actions ShowLink / ShowCellLink.
Prior to 15.0 it was called only for links in type Link and Img.
Returns true to suppress default action. url is url opened in browser, target is target browser's window.
new 16.1 API event type

OnSetClick

(TGrid grid, type[] cells, bool test)
Called before permits editing cell(s) link.
cells is array of cells as [row1,col1,row2,col2,...]. Function can modify content of this array.
test is set if only checks the editing permissions.
Return true to cancel the action.

Cell hint

The hint is a complete cell value displayed in place of the cell, if the cell content is bigger than the cell itself.
The hint can also display anything else than the cell content, it can be changed in OnHint event.
The hint is displayed immediately the mouse enters the cell and is displayed until the mouse leaves the cell or click happens or grid enters edit mode or shows dialog.
chg 14.0 <C><I><cell> int

ShowHint

[4]
If the Hint is shown for the cell.
0 - never.
1 - on not fully visible cell due its size.
2 - (new 11.0) also on not fully visible cell due scroll.
3 - (new 12.0) always, should be controlled by OnHint API event.
4 - (new 14.0) on not fully visible cell due its size - like 1, but precisely, always shown when text shown ellipsis.
5 - (new 14.0) also on not fully visible cell due scroll - like 2, but precisely, always shown when text shown ellipsis.
The Hint is never shown for cell types Bool, Radio, Icon, Pages, Abs, Chart and Gantt.
It is read from row before column.
new 12.0 <C><I><cell> type

HintValue

[]
Hint value to be used instead of cell value. It must correspond with the cell type. It is formatted by the cell format before it is shown in the hint.
new 12.1 chg 14.0 <Cfg> bool

ShiftHint

[1]
If set, shifts the hint left, if there is no room for it on right side. Since 14.0 the default value set to 1.
upd 12.0 API event string

OnHint

(TGrid grid, TRow row, string col, string hint, int reason)
Called when Hint is being displayed for given cell.
Since 12.0 the reason is why the hint is shown, bit array: &1 due width overflow, &2 due height overflow, &4 due cell overflow.
Return new string to display or hint. hint is by default cell html content.
Return null to not display the Hint at all.
<Actions>

ShowHint

Attached to events OnMouseOverContent and OnMouseOverCaption
Displays value of the actual cell as Hint, only if required and possible.
new 12.0 <Actions>

ShowHintStatic

Not attached to any event
Displays value of the actual cell as Hint, only if required and possible.
This Hint is static and is not hidden on mouse move, only on mouse click.
upd 12.0 API method bool

ShowHint

(TRow row, string col, bool static = 0, bool test = 0)
Displays cell value as Hint, only if required and possible.
Since 12.0 if set static = 1, the hint is not hidden on mouse move, only on mouse click.
Since 12.0 if set test = 1, the hint is not shown, just tests the possibility.
Since 12.0 it returns true for success.
API method void

HideHint

( )
Hides the actually displayed Hint.

Cell tooltip / title

renamed 6.0 upd 13.0 <C><I><cell> string

Tip

Tool tip text displayed when mouse hovers the cell.
The tip can contain HTML code except is set StandardTip='1'.
When cell contains Error attribute, the Error string is displayed instead of the Tip.
It can be set to 1 to display cell value as tip.
Since 13.0 it can contain keyword "*Value*" to display the cell value inside the tip text.
new 6.0 <C> <cell> string

TipXXX

Tool tip text displayed for given cell value. The XXX is actual cell value. If such tip does not exist, the normal Tip is displayed.
It has sense especially for Bool or Button types, to show different tooltip for checked / pressed and unchecked / not pressed state.
For example: <C Type="Bool" Tip0="Unchecked" Tip1="Checked"/>
new 6.0 <C> <cell> string

XXXTip

Tool tip text displayed for given cell event target. The XXX is actual cell event target under mouse cursor. If such tip does not exist, the normal Tip is displayed.
The XXX can be any event target name, see mouse event targets, for example EditIntTip, ButtonSaveTip, SideDefaultsTip, SideTip, ContentTip and so on.
It is intended to show different tool tip for part of the cell like side or tree button.
new 6.0 <C><I><cell> string

TipClass

An inner class for the tip.
It can be used to show the tip in different classes in different rows, columns or cells.
new 6.3 <C><I><cell> TPosition

TipPosition

Position of the tip dialog. By default it is placed under mouse cursor.
You can specify different Align to align it to the cell instead. For example TipPosition='{Align:"left above",Y:-4}' places the dialog above the cell.
See TPosition JSON attributes. The TipPosition automatically contains the actual cell as Tag attribute.
API event string

OnTip

(TGrid grid, TRow row, string col, string tip, int clientX, int clientY, int X, int Y)
Called when tooltip is being displayed. Return new string to display or tip. Return empty string to not display the tip.
It is called whenever mouse doesn’t move for TipStart milliseconds. It is called only once for the mouse position.
clientX, clientY are mouse coordinates in browser window. X, Y are mouse coordinates inside the cell row, col.
new 6.0 <Cfg> bool

StandardTip

[0]
By default is the Tip shown as TreeGrid tooltip. Its behavior can be controlled by other attributes and events. It also supports multiline and HTML tip.
Set it to 1, to show the Tip by standard browser tooltip - by HTML title attribute. All the other settings and events are ignored in this case.
<Cfg> int

TipStart

[500]
Time in milliseconds before tooltip is displayed while mouse is not moving.
If set to 0, the tip is never displayed, if set to 1, the tip is displayed immediately.
<Cfg> int

TipEnd

Time in milliseconds when tip will be automatically hidden. It must be higher than TipStart otherwise the tip is never shown.
If it is empty or 0, the tip is never automatically hidden.
new 13.2 <Cfg> string

TipDialog

JSON setting for tip dialog, similar to TreeGrid JSON menu settings.
For example <Cfg TipDialog="{CloseMove:1000}"/>, never closes the tip just for mouse move.
chg 6.0 API method void

ShowTip

(string tip)
Shows tip on actual mouse position.
API method void

HideTip

( )
Hides the actually displayed tooltip.

Cell popup menu

chg 12.0 upd 15.0<Cfg><C><I><cell> string [*]

Menu

An action menu for the cell. It can be displayed on click to the cell, to the panel button, on right click to the cell and so on. It is shown by action ShowMenu (next to the cell) and ShowPopupMenu (on mouse position).
It can contain two item types, action item and custom item.

The action item (since 12.0) is named as some TreeGrid action and this action is run on click to the item.
The action item is automatically hidden, if the action is not suitable for the cell or its actual state.
The action item name can end with @num, it will show the item only if the action will affect at least num items. For example "DeleteRows@2" will be shown only if there are at least two focused rows to delete.
Since 14.0 the action item name can end with @char, where the char can be "f", "s", "fc" or "sc", it will show the item only if there are at least two affected items or the one affected item is not also hovered item. f = focused rows, s = selected rows, fc = focused columns, sc = selected columns.

As the action can be used any TreeGrid <Action> except: all dragging actions, all mouse cursor actions, ShowPage (click to pager page), ShowTreeLevel (click Levels button), Invert...First (invert range according to the first cell), Tab... (tab navigation - focus), ChangeRadio (clicked radio button), ButtonUp / ButtonDown (simulated click to Button), Paste (paste from clipboard).
The action item names and their texts are defined in Text.xml, in <MenuCell> tag.
Since 15.0 The action item in <MenuCell> can end with "F" to be used only if called for focused cell or by "E" if called in edit mode.

The custom item is any other name than TreeGrid action name. It is always visible.
It can have assigned OnClick action, if the Menu is defined in JSON format to be called after click to the item. The OnClick function can return true to not call the OnContextMenu.
After user clicks to custom menu item it is called OnContextMenu.

The Menu can be first character separated array of menu item names. They can contain any HTML code. Separator can be shown as item named '-'
Or it can be in standard TreeGrid menu format as complex menu with sub levels, sub menus, columns and so on.
See also API ShowMenu function to show custom menu from JavaScript.

By default it is set in <Panel> as PanelCopyMenu, PanelCopyAllMenu, PanelColCopy, PanelColCopyAll and in <Toolbar> as AddMenu, AddChild and AddCol.
new 12.0 <C><I><cell> string [*]

PanelxxxMenu

Menu for the individual Panel button.
new 12.0 <Cfg> int

HideMenuUnused

[0]
If the menu action items that cannot be run are hidden.
0 no, they are disabled
1 yes, they are hidden
2 yes like 1 and also if the parent item contains only one available child item, the child item is shown instead of the parent.
3 yes like 1 and also the parent items are hidden, if they have no child items
4 yes like 2 and 3.
new 12.0 <Cfg> bool

ShowMenuSingle

[0]
For 1, if the Menu contains only one valid action item, it shows the menu anyway. Otherwise for 0 it does the action immediately without showing the menu.
new 6.2 API event string

OnGetMenu

(TGrid grid, TRow row, string col, string menu)
Called to get the popup Menu attribute dynamically by JavaScript.
menu is the original Menu for the cell. It should return new menu string.
new 12.0 API event bool

OnMenu

(TGrid grid, TRow row, string col, TMenu menu, TPosition position)
Called before the cell Menu is shown.
menu is the TMenu menu object for the cell. position is the menu TPosition object.
The menu and position can be changed in this event. Return true to not show the menu.
chg 6.0 API event bool

OnContextMenu

(TGrid grid, TRow row, string col, string result)
Called when user clicks to context menu set by Menu attribute.
result is Value or Name of the clicked item or all values.
Return true to not close the menu.
new 12.0 <Actions>

ShowMenu ...FAO

Attached to OnClickPanelCopy, OnClickButtonAdd and OnClickButtonAddChild
Displays Menu for the actual or focused cell.
Since 12.0 it processes the menu for TreeGrid actions, for previous behavior use ShowPopupMenuNoActions instead.
chg 12.0 <Actions>

ShowPopupMenu ...FAO

Attached to OnRightClick and OnClick2Cell events
Displays Menu for the actual or focused cell on mouse position.
new 12.0 <Actions>

ShowPopupMenuNoActions...FAO

Not attached to any event
Displays Menu for the actual or focused cell on mouse position.
Shows the menu without processing the action items. Use for compatibility with versions prior to 12.0
new 12.0 <Actions>

ShowNoMenu

Not attached to any event
Shows message that there is no available menu items. Never fails.
new 6.2 API method TMenu

ShowPopup

(TMenu Menu, function Func)
Shows custom popup menu on mouse position.
Closes any actually shown dialog in grid.
Menu is string with menu items (first character separated) or TMenu object.
Func is function (TMenuItem I) called after click to the menu. The I has set at least I.Name as the item name. It replaces Menu.OnSave.
If no Func is set, calls Menu.OnSave if defined or OnContextMenu API event.
For more information about the parameters see global function ShowMenu or ShowPopup.
new 11.0 API method TMenu

ShowMenu

(TRow row, string col, TMenu Menu, TPosition Pos = null, function Func = null, string Init = null, bool always = false)
Shows custom menu for given cell.
Closes any actually shown dialog in grid. If there is already dialog shown for this cell and not set always, it closes the dialog and returns null.
Menu is string with menu items (first character separated) or TMenu object.
Func is function (TMenuItem I) called after click to the menu. The I has set at least I.Name as the item name. It replaces Menu.OnSave.
For more information about the parameters see global function ShowMenu.
chg 11.0 API method TDialog

ShowDialog

(TRow row, string col, TDialog Dialog, TPosition Pos = null, bool always = false)
Shows custom dialog for given cell.
Closes any actually shown dialog in grid. If there is already dialog shown for this cell and not set always, it closes the dialog and returns null.
Dialog is string with HTML to display or TDialog object with dialog settings.
Since 11.0 the parameters changed, although the previous parameter set still work.
new 7.0 upd 11.0 API method TGrid

ShowPopupGrid

(TRow row, string col, string data, int width = null, int height = null, TDialog Dialog = null, TPosition Pos = null)
Creates and shows new grid as popup dialog for given cell.
data is XML or JSON string to be used as data source to create the grid from. The grid is always created synchronously (Sync=1).
width (new 7.1) is exact width of the main grid tag in pixels. If not set, the grid has set NoHScroll and uses scrollbar of the dialog.
height (new 7.1) is exact height of the main grid tag in pixels. If not set, the grid has set NoVScroll and uses scrollbar of the dialog.
Dialog (since 11.0) is the TDialog object with settings for grid parent dialog.
Pos (since 11.0) is the TPosition with position settings for the dialog.
The grid will get ZIndex = 270 or if the parent has set ZIndex, it will get ZIndex+20.
It returns the popup grid object.
(Since 11.0) popupgrid.ParentGrid returns the parent grid from popup grid.
(Since 11.0) popupgrid.ParentDialog returns the dialog object from popup grid. For example popup.ParentDialog.Close() closes the popup dialog and clears the popup grid.
(Since 11.0) popupgrid.ParentDialog.Row returns the row in parent grid from popup grid.
(Since 11.0) popupgrid.ParentDialog.Col returns the column in parent grid from popup grid.
(Since 11.0) parentgrid.Dialog.Grid returns the popup grid from parent grid. Note, here is an exception, because in other dialogs the Dialog.Grid shows back to the parent grid.
(Since 11.0) parentgrid.Dialog returns the dialog object from parent grid.
Note, this function is expected to show small grids as popup dialog for the source grid. For large popup grids use your own dialogs / windows with dynamically created grid by TreeGrid( ) function.
If the main grid has defined Text_Url or Defaults_Url, it must have set also Text_Static="Text" or Defaults_Static="Defaults"!
new 14.0 <Actions>

CloseDialog

Attached to events OnClickNothing and OnClickOther
Closes actually displayed grid popup menu or dialog (Enum, Defaults, Menu, Calendar). Clears the Dialog property.
Closes also custom menus or dialogs shown by ShowPopup, ShowMenu, ShowDialog, ShowCalendar, or ShowPopupGrid.
upd 6.0 API method void

CloseDialog

( )
Closes actually displayed grid popup menu or dialog (Enum, Defaults, Menu, Calendar). Clears the Dialog property.
Closes also custom menus or dialogs shown by ShowPopup, ShowMenu, ShowDialog, ShowCalendar, or ShowPopupGrid.
chg 6.0 API variable TMenu

Dialog

Actually displayed grid popup dialog or menu.
It is TMenu object with all settings.
Set it if you show custom dialog by global (not TGrid method) API function ShowMenu, ShowDialog or ShowCalendar.
Or set it to you custom dialog object if you create your custom dialog, this object must have defined Close ( ) method that closes the dialog.