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

Configuration in cookies

TreeGrid documentation

Many TreeGrid settings are automatically saved in client browser and are persistent between sessions. So the server does not need to care about it.
The saved settings override the settings in xml, so the settings in xml are used only for the first visit, when no settings are saved in cookies.
When the grid layout is changed, you should increase Version attribute to delete old configuration from cookies and use the new setting from xml.
Since 6.4 the Version is automatically generated because of setting AutoVersion='1'.
You can suppress saving configuration completely by SuppressCfg='3' or you can suppress only some setting by appropriate ...Lap attribute (for example SortLap='1' suppresses only sorting).
Configuration is saved under the grid id name. Grids with the same id will share their saved settings, but only if cookie or persistent storage is shared between those pages.
You can control cookie setting also by API properties Grids.CookieExpires and Grids.CookieParam.

The settings are saved to cookies by default. Because of cookies size limit (4096 B) you can save it to browser persistent storage instead. The persistent storage is supported only by IE 5.0+ and Firefox 2.0+. See PersistentCfg attribute.

It is also possible to upload to and download from server the actual configuration in XML (Upload_Type="Settings") or in black box Cookie (Upload_Type="Cookie").

To cookies (or persistent storage) is saved by default

  • Columns' visibility, positions and widths
    Attributes <C Visible>, <C Width> and positions of tags <C> inside their section

  • Column sections widths
    Attributes <Cfg LeftWidth MidWidth RightWidth/>

  • Sort, filter, group and search settings
    <Cfg Sort AutoSort Sorted/>
    <Cfg Group Grouped/>
    <Cfg SearchExpression SearchAction SearchMethod SearchCaseSensitive SearchCells SearchDefs SearchCols Searched/>
    <Filter> cell values and cell Filter attribute and <Cfg Filtered/> attribute.

  • Configuration settings - set in configuration menu and from toolbar
    <Cfg ShowDeleted Calculated AutoUpdate ShowDrag AllPages Hover SortIcons CustomScroll ScrollAction/>

  • Width and height of main tag if grid resizing is permitted (css style height and width of the main tag).

  • Export settings
    <Cfg ExportType, ExportFormat />

  • Printing and PDF Export settings
    <Cfg PDFPageSize, PDFPageOrientation, PDFFitPage, PDFText, PrintExpanded, PrintFiltered, PrintPageBreaks, PrintRows />

  • Gantt chart settings - attributes of Gantt type column
    From menu: GanttCorrectDependencies, GanttCheckDependencies, GanttCorrectDependenciesFixed, GanttFixComplete, GanttStrict,
    GanttHideExclude, GanttBaseProof, GanttFinishProof, GanttBasePreferred, GanttFinishPreferred, GanttCheck, GanttCheckExclude
    GanttMinSlack, GanttErrSlack, GanttSeparateSlack
    Zoom: GanttZoom, GanttWidth, GanttDate
    Other: GanttResourcesFilter

For grids with more columns to decrease cookie size of saved data, you should name columns as short as possible, the best to up to three characters.

To cookies (or persistent storage) you can also save:

  • Scroll left and top (permit it by ScrollLeftLap='0' / ScrollTopLap='0')
  • All shown / hidden row state (row Visible attribute) (permit it by SaveVisible)
  • All expanded / collapsed state in tree (row Expanded attribute) (permit it by SaveExpanded)
  • All expanded cells (permitted by ExpandCells or ExpandRows)
  • All selected rows state (row Selected attribute) (permit it by SaveSelected)
  • All pending changes (changed cell values, added, deleted, moved rows) (permit it by SaveValues)
  • Custom filters (permit it by SaveFilters)
  • Server session (IO Session attribute) (permit it by SaveSession)
  • Chosen grid style (<Cfg Style/>)
Take care about the length of saved data, especially if you are saving to cookies and not to persistent storage. You can usually permit saving of these setting only for small grids.
<Cfg><treegrid/bdo> string

id

[...] Both letters lowercase!
Unique ID of created TreeGrid on the page. It must be string, not number, to not collide with grid indexes.
Under this name will be stored configuration to cookies or persistent storage if not set CfgId.
new 8.1 <Cfg> string

CfgId

Under this name will be stored configuration to cookies.
Useful to set when more grids on page share the same configuration.
chg 6.4 <Cfg> int

Version

Version of data. Grid loads configuration from cookies only if the Version is the same as saved.
Change this number whenever data structure (especially number of columns, column names and types) changes to delete old configuration saved to cookies.
Since 6.4 the not set Version is automatically generated when set AutoVersion='1' (it is set by default)
new 6.4 <Cfg> bool

AutoVersion

[1]
If set to 1, the configuration Version is automatically generated according to the actual values in XML layout.
Whenever is the XML layout changed (only the attributes saved to cookies), the whole cookie is cleared and new values from XML are used.
If set Version or Cookie attribute, the AutoVersion is ignored.
The XML attributes ignored in AutoVersion calculation: values (SaveValues), Selected (SaveSelected), Expanded (SaveExpanded), main tag width, scroll position.
Remember, when upgrading TreeGrid to higher version, there are often added new items to cookie, so in this case the Version changes and the old configuration is cleared when set AutoVersion='1'.
<Cfg> int

SuppressCfg

[0]
If does not use any client settings in cookies (0 - uses, 1 - does not load, 2 - does not save, 3 - nothing)
If set to 4 does not load or save configuration from cookies, but still accepts and returns configuration in Cookie attribute.
It is good to set SuppressCfg='1' for development.
new 8.0 <Cfg> int

DefaultCfg

[3]
Which default configuration is saved to be available to be restored by RestoreCfg
1 - default configuration in XML
2 - configuration loaded from cookies on start
3 - both
new 8.0 <Cfg> int

DefaultCfgMenu

[1]
Controls Defaults button in configuration menu.
0 - button will be hidden
1 - button loads default configuration in XML (must be set DefaultCfg to 1 or 3)
2 - button loads configuration loaded from cookies on start (must be set DefaultCfg to 2 or 3)
upd 11.0 <Cfg> int

PersistentCfg

[0]
If set, uses persistent browser cache instead of cookies for saving configuration.
The persistent cache can store much more data, at least one megabyte (shared among all pages).
(Since 7.0) This persistent cache is used as localStorage in IE8+, Firefox 3.0+, Chrome 4+, Safari 4+, Opera 10.5; Maximal capacity 5MB
IE6 and IE7 uses userData behavior with maximal capacity 128kB
Firefox 2.0 uses globalStorage with maximal capacity 1 MB
In many browsers the persistent cache is not used when running locally on protocol file://.
0 - use cookies, 1 - use persistent cache if available otherwise use cookies, 2 - use only persistent cache, if available, 3 - (new 11.0) use sessionStorage if available
chg 8.0 upd 14.1 <Cfg> string[ ]

SaveAttrs

Comma separated array of pairs [ident, attribute_name], like "ident1,attr1,ident2,attr2,ident3,attr3,...".
The ident can be: a) row id to save row attribute, b) since 8.0 column name to save column attribute or c) empty to save <Cfg> attribute.
In case the column name collides with row id, the column is used.
Since 14.1 the ident can be keyword starting by asterisk: *Col to save attribute of all columns, *Row to save attribute of all rows, *Fixed to save attribute of all fixed rows (head+foot), *Space to save attribute of all solid space rows.
Saves all these attribute/cell values to cookies. To save cell value, just specify its column name (as even value and row id as ident).
You can also save any your custom row, column or grid/Cfg attribute.
For example "R1,Col1,R6,Col7CanEdit,Col1,CanEdit,,Adding" = saves values R1.Col1 and R6.Col7CanEdit, column Col1 attribute CanEdit and Cfg.Adding
! Remember, the configuration from cookies is loaded after layout xml (if present) is loaded, so to save attributes from rows loaded in data xml is impossible !
<Cfg> int

SaveAttrsTrim

[50]
By default are all values saved by SaveAttrs trimmed to 50 characters, because the size of cookie is small, you can change the predefined length here.
<Cfg> string

Cookie

Whole configuration in string as it was saved to cookie. Use this attribute to get or return configuration saved on server by Upload_Type="Cookie". If this attribute is set, the configuration is loaded from it instead of cookies.
Loading configuration is still affected by SuppressCfg (see also its value 4), Version and other such settings.
Remember, this setting must not be modified, it must be completely the same as the setting returned by grid when saving.
To send configuration to server by API you can use such code: AjaxCall ("url to send", grid.GetXmlData("Cookie"));
or save it in API event: Grids.OnCfgSaved = function(G,cookie) { AjaxCall ("url to send", cookie, function(){}); }
global prop. int

Grids.CookieExpires

When configuration in cookies expires, 0 (default) never, 1 only this session, >1 after xxx seconds, or can be of type Date - exact expiration date.
global prop. string

Grids.CookieParam

Other cookie parameters (path, domain, secure) in string, starting with ';'. For example "; path=/".
upd 8.0 API event bool

OnLoadCfg

(TGrid grid, string cfg)
Called when configuration is being loaded, return true to suppress loading. Called even if SuppressCfg set.
(new 8.0) cfg is cookie string that was passed to LoadCfg, if any.
upd 8.0 API event void

OnCfgLoaded

(TGrid grid, string cfg)
Called after configuration is loaded to provide own update to cfg.
(new 8.0) cfg is cookie string that was passed to LoadCfg, if any.
upd 8.0 API event bool

OnSaveCfg

(TGrid grid, bool return)
Called when configuration is being saved to cookies, return true to suppress saving. Called even if SuppressCfg set.
(new 8.0) return is set to true if configuration is not saved to cookies, it is just read.
new 10.0 API event bool

OnCfgSaved

(TGrid grid, string cfg)
Called when TreeGrid cookie is to be saved to browser cookies or local storage, return true to suppress saving.
Here you can upload the cookie to server by AjaxCall to be later loaded to grid by Cookie attribute.
new 8.0 API event void

OnLoadCustomCfg

(TGrid grid, string custom, string cfg)
Called to load custom configuration saved by OnSaveCustomCfg.
The custom is the custom configuration string. Is null, if no custom configuration was saved.
cfg is cookie string that was passed to LoadCfg, if any.
new 8.0 API event string

OnSaveCustomCfg

(TGrid grid, bool return)
Called to add any custom string to saved configuration. Return the string to add.
return is set to true if configuration is not saved to cookies, it is just read.
upd 8.0 API method void

LoadCfg

(string cookie = null)
Loads configuration from cookies. Does not display any changes.
Since 8.0 it can be called also after grid is rendered to apply the configuration changes again.
Since 8.0 The cookie can be cookie string got by SaveCfg method or GetXmlData with Cookie setting.
upd 8.0 API method string

SaveCfg

(bool return = false)
Saves configuration to cookies.
Call it after some custom setting changed to save changes to cookies.
Since 8.0 If set return = true, it returns the configuration in string instead of saving it cookie. To be later used by LoadCfg or by Cookie attribute.
new 8.0 API method void

RestoreCfg

(int type = 1)
Reloads specified configuration saved by DefaultCfg
type = 1 - default configuration in XML, 2 - configuration loaded from cookies on start
upd 11.0 global func. void

SaveCache

(string id, string val, bool session = 0)
Saves value to persistent cache according to given id. See PersistentCfg.
You can also redefine this function to do your own caching mechanism when set <Cfg PersistentCfg>.
(Since 11.0) If set session = 1, it saves to sessionStorage instead of localStorage.
upd 11.0 global func. string

LoadCache

(string id, bool session = 0)
Loads and returns value from persistent cache saved by SaveCache function.
(Since 11.0) If set session = 1, it loads from sessionStorage instead of localStorage.