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 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 and 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) Mathematical functions 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 Special cell style attributes Cell CSS class Cell background color Dynamic cell border Cell HTML style Row color alteration Cell mouse cursor

Cell types
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

Basic settings Export API Client export Server export

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

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 menu Default toolbar Language & regional setup (Text.xml) Useful API function Help file

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

Grid size and scroll

TreeGrid documentation

Describes how to control width and height of the whole grid and when and how to scroll its content.

Default behavior

By default TreeGrid is rendered into its main div tag and does not change its size. The main tag should have set its height and width style attributes, otherwise grid sets them to 100%.
In strict mode the main tag height attribute should be set to fixed height if it can affect body height, otherwise grid automatically sets <Cfg MaxVScroll='2000'/>.
If the grid content is smaller than the main tag, there is shown empty space inside the main tag, if the grid is bigger than the main tag it shows its scrollbars.
The main tag has automatically set overflow:hidden and you must not change it.
When grid cannot show its content because it wider or higher than the main tag size, it shows error message "Too small extents". To not show the message, set <Lang><Text ExtentErr=""/></Lang>.
When grid cannot show its content horizontally, it first tries to minimize all fixed columns and Pager that have CanResize='1' to their MinWidth. If it is not enough, it hides all fixed columns and Pager that have CanHide='1'.
new 6.0 <Cfg> bool

ExactSize

[1]
If the size of grid is computed according to the real main tag size.
For 1 it preserves also percentage width inside tables and similar layouts.
Set it to 0 for large tables when grid becomes slow when updating layout.
If used external objects like Flash or SilverLight in grid cells, it should be set to 0.
new 12.0 API event bool

OnSizeError

(TGrid grid, int width, int height)
Called when the grid cannot be rendered due too small size of the main tag.
Solve this problem by changing grid content or resizing the main tag, call Update() and return true.
width is the available width in pixels, negative means error.
height is the available height in pixels, negative means error.

Maximize grid width and height

To fill the whole main tag by grid content set <Cfg ConstHeight='1' ConstWidth='1'/> or use some row with <I RelHeight='1'/> and column with <C RelWidth='1'/>.
To fill the whole window by main tag set <Cfg MaxHeight='1' MaxWidth='1'/>, ensure that your page layout fulfills all requirements for the MaxHeight attribute!
You can set minimal size of the main tag by <Cfg MinTagHeight='...' MinTagWidth='...'/>, maximal size of the main tag by <Cfg MaxTagHeight='...' MaxTagWidth='...'/>.
<Cfg> bool

ConstHeight

If set to 1, updates height of grid to fill whole main tag. It does not modify main tag height, see MaxHeight.
It is ignored when set NoVScroll = '1'.
In fact it adds to grid new special row <Space RelHeight='1' Space='2' Kind='Fill'/>. This row is positioned between body and foot section.
To better control this space, you can add this <Space> row by yourself instead of using ConstHeight attribute.
If grid already contains some row with RelHeight attribute set, the ConstHeight attribute is ignored.
! If you use ConstHeight, do not set height of main tag in percent. !
chg 7.0 <Cfg> int

ConstWidth

[4]
If set, it adds new white ConstWidth column to middle or right section to resize grid content to main tag width. It does not modify main tag width, see MaxWidth.
It add the column <C Name="_ConstWidth" ConstWidth='1' Def="ConstWidth"/> with also disabled all standard features like sorting, filtering or dragging.
The column uses CSS class GxCellEmpty for all cells except header, here uses GxCellHeaderEmpty
0No column added
1The column is placed between middle and right section, into right section if there is some column, otherwise to the middle section.
2The column is always placed to the right end of middle section.
3(new 7.0) The column is placed to the right end of right section if exists, otherwise to the middle section.
4(new 7.0) It resizes the grid content to show at least Columns and Cfg buttons on toolbar.
If the toolbar is hidden or it does not contain the buttons, it does nothing. Column position is the same as 3.
5 - 9999(new 7.0) It resizes the grid content maximally to this pixel value, if less than main tag width. Column position is the same as 3.
Useful to not hide some buttons on toolbar (e.g. Columns visibility menu), when grid is too narrow due hidden many columns
For example ConstWidth="500" ensures the Toolbar will be at least 500px wide, but when the grid columns together are wider than 500px, it does not resize the grid any more.
It is ignored when set NoHScroll='1'.
If you permit users to hide all columns you should ensure that the columns menu will be still accessible, the simplest way is to set appropriate ConstWidth.
<Cfg> int

MaxHeight

If set, updates height of main tag to fill the whole window. It does not modify grid content height, see ConstHeight.
It cannot be used when ResizingMain is set to 1 or 3 (vertical resizing).
Is possible to have more grids on page (vertically) with MaxHeight set, in this case their height is computed as ratio of their MaxHeight value or as percentage, see MaxHeightPercent.
To let grid maximize its main tag to window height, on your page there must not be:
a) any parent tag (in hierarchy from grid to <body>) with overflow set to hidden, auto or scroll.
b) any parent tag (in hierarchy from grid to <body>) with position:absolute.
c) any tag (except tags included in tag with not visible overflow or absolute position) with height set to percentage (like height:100%).
new 6.0 <Cfg> bool

MaxHeightPercent

If the MaxHeight attribute is set in percentage or as ratio
0 - the MaxHeight is ratio of the sum of all these tags in the MaxHeightParent or body - the tags always fill exactly the whole MaxHeightParent or body
e.g. two grids with MaxHeight='20' and MaxHeight='30' will be high 20/(20+30) = 0.4 and 30/(20+30) = 0.6
1 - the MaxHeight is % of 100%, the 100% is the remaining height in the MaxHeightParent or body
e.g. two grids with MaxHeight='20' and MaxHeight='30' will be high 20% and 30% and there will be empty space with 50% remaining height.
new 6.0 <Cfg> int

MaxHeightReserved

This height will be reserved empty in the MaxHeightParent or body, in pixels.
This space will be always empty when applying MaxHeight.
new 6.0 <Cfg> string

MaxHeightParent

Offset parent to calculate the height according to, when applying MaxHeight. The id of the tag.
If it not set, the offset parent is document.body or the nearest parent tag with overflow set or absolute position.
The parent must have set fixed height except the <body>!
upd 6.0 <Cfg> bool

MaxWidth

If set to 1, updates width of main tag to fill the whole parent tag or body. It does not modify grid width, see ConstWidth.
It cannot be used when ResizingMain is set to 2 or 3 (horizontal resizing).
Now it just sets width of main tag to 100%.
The main tag should not have set any padding, border or margin, if required, set them to some parent tag.
<Cfg> int

MinTagHeight

Minimal height of main tag in pixels. This value is used when main tag is shrunk because of resizing by user or when applying MaxHeight attribute.
It is also used when main tag has set percentage height in style, but in this case it does not restore the percentage height when tag can be higher!
<Cfg> int

MinTagWidth

Minimal width of main tag in pixels. This value is used when main tag is shrunk because of resizing by user or when applying MaxWidth attribute.
It is also used when main tag has set percentage width in style.
chg 6.0 <Cfg> int

MaxTagHeight

Maximal height of main tag in pixels. This value is used when main tag is enlarged because of resizing by user or when applying MaxHeight attribute.
It is also used when main tag has set percentage height in style, but in this case it does not restore the percentage height when tag can be higher!
<Cfg> int

MaxTagWidth

Maximal width of main tag in pixels. This value is used when main tag is enlarged because of resizing by user or when applying MaxWidth attribute.
It is also used when main tag has set percentage width in style.

Update size according to the content

To shrink or enlarge the main tag according to grid content. set <Cfg NoVScroll='1' NoHScroll='1'/>.
To shrink or enlarge the main tag up to specific size only, set <Cfg MaxVScroll='...' MaxHScroll='...'/>, when grid content reaches this maximum, it shows its scrollbars.
To use your own scrolling behavior set <Cfg NoScroll='1'/>. There will be used scrollbars of parent tag with overflow set or window scrollbars.
<Cfg> bool

NoVScroll

If set to 1, the TreeGrid always resizes vertically the main tag to show the entire grid.
When set, a user cannot resize the main tag vertically (ResizingMain ignores 1 or 3). It disables all RelHeight rows and ConstHeight.
<Cfg> bool

NoHScroll

If set to 1, the TreeGrid always resizes horizontally the main tag to show the entire grid.
When set, a user cannot resize the main tag horizontally (ResizingMain ignores 2 or 3). It also disables all RelWidth columns and ConstWidth.
renamed 6.0 <Cfg> int

MaxVScroll

If set, resizes vertically the main tag tag to show the entire grid, but only up to the specified size in pixels. Grid behaves in this way:
When grid content is higher than this maximum, it sets the main tag height to the maximum and shows vertical scrollbar.
When grid content is smaller than this maximum, it shrinks the main tag to accommodate the grid only.
When set, it disables all RelHeight rows and ConstHeight.
new 6.0 <Cfg> int

MaxHScroll

If set, resizes horizontally the main tag to show the entire grid, but only up to the specified size in pixels. Grid behaves in this way:
When grid content is wider than this maximum, it sets the main tag width to the maximum and shows horizontal scrollbar.
When grid content is smaller than this maximum, it shrinks the main tag to accommodate the grid only.
When set, it disables all RelWidth columns and ConstWidth.
chg 7.0 API event void

OnResizeMain

(TGrid grid)
Since 7.0 the event is called also when resizing main tag by NoVScroll, NoHScroll, MaxVScroll and MaxHScroll. But not by NoScroll.
<Cfg> bool

NoScroll

If set to 1, does not use TreeGrid’s scrollbars. The main tag is always resized to accommodate exactly the grid content.
In this case are used scrollbars of parent tag with overflow set or browser window.
In this case the main tag has automatically set overflow:visible and it must not be changed.

Let a user to control the grid size

To let a user to resize main tag, set <Cfg ResizingMain='3'/>.
The user will resize the main tag, but not the grid content, to update grid content to fill the resized main tag set <Cfg ConstHeight='1' ConstWidth='1'/> or use some row with <I RelHeight='1'/> and column with <C RelWidth='1'/> .
You can set minimal permitted size of the main tag by <Cfg MinTagHeight='...' MinTagWidth='...'/> and maximal size by <Cfg MaxTagHeight='...' MaxTagWidth='...'/>.
upd 12.0 <Cfg> int

ResizingMain

main tag extents are saved to cookies, avoid it by <Cfg ResizingMainLap='1'/>
If set, main tag can be resized by user by dragging by bottom right edge of toolbar.
= 1 resizes vertically (height), 2 resizes horizontally (width), 3 resizes both sides.
If added 4, it does not hide the table while resizing.
(new 12.0) If added 8 or 12, it hides content also of other grids on page (8 all grids with MaxHeight set, 12 all grids).
(new 12.0) If added 16, it does not use LeftWidth / MidWidth / RightWidth when calculating minimal permitted width.
Extents of main tag are saved to cookies, to suppress it set ResizingMainLap='1'.
Resizing height cannot be done when set MaxHeight or NoVScroll. If set MaxVScroll, the main tag can be resized up to the grid content height.
Resizing width cannot be done when set MaxWidth, NoHScroll. If set MaxHScroll, the main tag can be resized up to the grid content width.
If resizing main tag is permitted, it is also resized automatically if it cannot accommodate the grid (the fixed sections of grid are too high or wide), to preserve displaying "Too small extents" message.
<Actions>

GridResize

Attached to OnDragResize and OnDragButtonResize, can be attached to OnDrag... events only
Starts resizing main tag by mouse.
<Actions>

GridResizeDefault

Attached to OnDblClickResize and OnDblClickButtonResize
Resizes main tag back to its original size after it was resized by a user.
API event void

OnResizeMain

(TGrid grid)
Called after main tag is resized by a user.
Since 7.0 the event is called also when resizing main tag by NoVScroll, NoHScroo, MaxVScroll and MaxHScroll. But not by NoScroll.

Widths of individual sections

TreeGrid supports scrolling of all three column sections (left, mid, right).
By default is scrolled only the middle (variable) section. Only if the grid cannot accommodate the other section, they are scrolled too.

The algorithm to show scrollbars for sections
1) If there is enough space to show all columns in their original widths, no scrollbar is shown. The widths of sections cannot be resized by a user.
2) If there is no room to show all columns, the sections are resized to their Width (LeftWidth/MidWidth/RightWidth).
If section has not set its width, it is not resized.
The sections are resized in the order SectionShrinkOrder, by default: Mid, Right, Left. So first is resized the middle section to its Width, if there is still no room it continues with right and next width the left one.
3) If there is still no room, the sections without Width are resized to their MinWidth (MinLeftWidth/MinMidWidth/MinRightWidth). Still in the same order.
4) If there is still no room, the sections with Width are resized to their MinWidth. Still in the same order.
5) If there is still no room and vertical pager is displayed, the pager is resized to its MinWidth. Since 11.0 the order of points 4 and 5 was changed.
6) If there is still no room, all sections are resized to their border width only (few pixels). Still in the same order.
7) If there is still no room, the "Too small grid size" message is shown and the grid is disabled.
Synchronize sections widths among more grids
a) If the grids have the same columns, do in all the affected grids:
Set <Cfg Sync="sec,cols,style"/>, optionally add "horz" to synchronize horizontal scroll, optionally add "zoom" to synchronize Gantt zoom.
Set the same values for <Cfg> attributes LeftWidth, MidWidth, RightWidth, MinLeftWidth, MinMidWidth, MinRightWidth, SectionShrinkOrder in all the grids.
Ensure the TreeGrid main tags have the same widths.
b) If the grids have different columns, do in all the affected grids:
Set <Cfg Sync="sec,style"/>, optionally add "horz" to synchronize horizontal scroll, optionally add "zoom" to synchronize Gantt zoom.
In every column section define one column as <C ConstWidth='1' RelWidthType='1'/>
Set the same values for <Cfg> attributes LeftWidth, MidWidth, RightWidth, MinLeftWidth, MinMidWidth, MinRightWidth, SectionShrinkOrder in all the grids.
Optionally set <Cfg LeftCanResize='4' RightCanResize='4'/> to resize also sections without scrollbars.
Ensure the TreeGrid main tags have the same widths.
new 6.5 <Cfg> bool

WideHScroll

[0]
0All three column sections can be scrolled, depending on their ...Width attributes presets.
If the sections are wider than grid, the sections are shrunk and their scrollbars are shown. The section order is [middle,right,left].
 
1There is only one horizontal scrollbar spanned for all three column sections and controls only the middle section.
Only the middle section can be scrolled.
It was default and only behavior in versions prior to 6.5
If left and right fixed columns are wider than the grid, "Too small grid size" message is displayed and grid is disabled. No column resize/hide is done unlike versions below 6.5!
deleted 6.5 <Cfg> bool

ShortHScroll

Replaced by WideHScroll
If set to 1, the horizontal scrollbar is displayed only below variable columns. It is just visual effect.
new 6.5 upd 12.0 <Cfg> int

LeftWidth

Saved to cookies, avoid it by <Cfg SectionWidthLap='1'/>
Expected maximal width (in pixels) of the left columns section.
If the section content becomes wider, scrollbar is shown.
It can be changed when resizing section, see LeftCanResize.
Since 12.0 if set to 0, it is set to width of all left columns (for RelWidth columns used MinWidth or 0).
new 6.5 upd 12.0 <Cfg> int

MidWidth

Saved to cookies, avoid it by <Cfg SectionWidthLap='1'/>
Expected maximal width (in pixels) of the middle (variable) columns section.
If the section content becomes wider, scrollbar is shown.
It can be changed when resizing section, see LeftCanResize or RightCanResize.
Since 12.0 if set to 0, it is set to width of all variable columns (for RelWidth columns used MinWidth or 0).
new 6.5 upd 12.0 <Cfg> int

RightWidth

Saved to cookies, avoid it by <Cfg SectionWidthLap='1'/>
Expected maximal width (in pixels) of the right columns section.
If the section content becomes wider, scrollbar is shown.
It can be changed when resizing section, see RightCanResize.
Since 12.0 if set to 0, it is set to width of all right columns (for RelWidth columns used MinWidth or 0).
new 6.5 <Cfg> int

MinLeftWidth

[50]
Expected minimal width (in pixels) of the left columns section.
The section is not shrunk below this limit, except all other sections reached their minimal width and grid horizontal space is still too small.
new 6.5 <Cfg> int

MinMidWidth

[50]
Expected minimal width (in pixels) of the middle (variable) columns section.
The section is not shrunk below this limit, except all other sections reached their minimal width and grid horizontal space is still too small.
new 6.5 <Cfg> int

MinRightWidth

[50]
Expected minimal width (in pixels) of the right columns section.
The section is not shrunk below this limit, except all other sections reached their minimal width and grid horizontal space is still too small.
new 9.2 <Cfg> int

SectionResizing

[1]
If and how the column sections can be resized. Individual section resizing permissions are set by LeftCanResize and RightCanResize.
0 - No resizing is permitted, regardless on LeftCanResize / RightCanResize settings,
1 - Resizing can be done by dragging vertical splitter shown between the sections (new 9.2).
2 - Resizing can be done by dragging small vertical splitters between horizontal scrollbars (default behavior prior 9.2).
new 6.5 chg 9.2 upd 11.0 <Cfg> int

LeftCanResize

[1]
When and how the edge between left and middle column section can be moved.
0 - Never
1 - Only if the LeftWidth is set and there is scrollbar in left or middle section.
2 - (new 9.2) Always when there is scrollbar in left or middle section.
3 - (new 9.2) Always when there is scrollbar in any section (left, middle, right). The right section width can be also changed if the middle section cannot be resized enough.
4 - (new 11.0) Even if there is no scrollbar and the sections have defined some column with RelWidth='1' or ConstWidth='1' and RelWidthType='1'
The resizing changes LeftWidth and MidWidth, (for 3 and 4 also RightWidth).
The section can be caught and dragged by the place between left and middle scrollbar.
Sections cannot be resized below their Min...Width and above sum of their column widths.
new 6.5 chg 9.2 upd 11.0 <Cfg> bool

RightCanResize

[1]
When and how the edge between right and middle column section can be moved.
0 - Never
1 - Only if the RightWidth or MidWidth is set and there is scrollbar in right or middle section.
2 - (new 9.2) Always when there is scrollbar in right or middle section.
3 - (new 9.2) Always when there is scrollbar in any section (left, middle, right). The left section width can be also changed if the middle section cannot be resized enough.
4 - (new 11.0) Even if there is no scrollbar and the sections have defined some column with RelWidth='1' or ConstWidth='1' and RelWidthType='1'.
The resizing changes RightWidth and MidWidth, (for 3 and 4 also LeftWidth).
The section can be caught and dragged by the place between right and middle scrollbar.
Sections cannot be resized below their Min...Width and above sum of their column widths.
new 11.0 <Cfg> string[ ]

SectionShrinkOrder

["mid,right,left"]
In this order the column sections are shrunk if there is no room for them. See the resizing algorithm.
Can be any combination of words left, mid, right; case insensitive.
new 6.5 <Actions>

SectionResize

Mouse dragging action, only for OnDrag... event
Starts resizing column section by mouse.
By default is the action attached to OnDragHScrollLeft (left/middle scrollbar), OnDragHScrollRight (middle/right scrollbar).
new 6.5 API event void

OnSectionResize

(TGrid grid, int section, int widthchange)
Called when section (0 - left, 1 - middle, 2 - right) is resized by a user.
It can be called more times during resizing column by a user, for every change.
new 6.5 API event void

OnAfterSectionResize

(TGrid grid, int section)
Called after section (0 - left, 1 - middle, 2 - right) is resized by a user. It is called only once.

Other scrolling attributes and API

new 7.0 <Cfg> int

CustomScroll

[0]
Type of scrollbars used in grid. It affects only the base vertical and horizontal scrollbars scrolling the whole grid section.
0 - standard browser scrollbar
1 - normal style scrollbar, 2 - big style scrollbar, 3 - small (simple) style scrollbar
4 - hidden (no) scrollbars, you can assign action Scroll to some drag event to scroll on drag. Scrolling is also possible by mouse wheel or by focus by arrow keys.
Custom scrollbars are not suitable for very large grids with many rows or columns, because the custom scrollbar step is too big for them.
new 7.0 <Cfg> int

TouchScroll

[1]
Type of scrollbars used in grid only on touchpad, e.g. on iPad. It affects only the base vertical and horizontal scrollbars scrolling the whole grid section.
It changes value of CustomScroll for tablets only.
0 - standard browser scrollbar
1 - normal style scrollbar, 2 - big style scrollbar, 3 - small (simple) style scrollbar
4 - hidden (no) scrollbars, you can assign action Scroll to some drag event to scroll on drag. Scrolling is also possible by mouse wheel or by focus by arrow keys.
new 7.0 upd 12.0 <Cfg> int

ScrollAction

[ ]
For tablets only.
Since 12.0 it is deprecated to control the tablets by one finger.
Predefines behavior of scrolling action (DragXRow and DragXGrid). When set, users can change this setting also via configuration menu.
By default it is empty to not modify the <Actions> settings.
0 - No scroll action, scrolling can be done only by scrollbars.
1 - Scroll by one finger, it replaces default iPad screen move.
2 - Scroll by two fingers, it replaces default iPad zooming, it is default grid behavior.
3 - Scroll by three fingers, it replaces grid row dragging.
new 12.0 upd 12.1 <Cfg> int

MomentumScroll

[1]
For tablets only.
If set, uses momentum scrolling on WebKit tablets by -webkit-overflow-scrolling: touch;
If set, it always disables the ScrollAuto action and uses default tablet scrolling.
The momentum scrolling scrolls also when finger is out the tablet, until it is stopped by next touch.
Since 12.1 if set to 2 disables the momentum scrolling if some TreeGrid dialog is opened to avoid Safari bug that scrolls the grid behind the dialog. The value 2 can slightly slow down the dialog display and old iOS it blinks.
Since 12.1 if set to 3 it behaves like 2 on Safari 8+ and like 1 on older Safari.
new 7.0 <Cfg> int

CustomHScroll

[0]
Presets different value of CustomScroll for horizontal scrollbar(s).
<Cfg> bool

HideHScroll

If set to 1, the horizontal scrollbar is not visible and it cannot be used by a user to scroll the grid horizontally.
All other scrolling ways (by focus, by API) are still possible like the scrollbar is visible.
It can be used to hide the scrollbar and provide custom way for horizontal scrolling, e.g. some buttons.
Since 7.0 it sets CustomHScroll = '4'
new 12.0 <Cfg> bool

ShowHScroll

If set to 1, the horizontal scrollbar(s) is still visible even if it is not required.
<Cfg> bool

ShowVScroll

If set to 1, the vertical scrollbar is still visible even if it is not required.
It automatically sets <Cfg ConstHeight='1'/> if not set and no RelHeight row exists. Ignored when set NoVScroll or MaxVScroll.
Set it to 1 if there are many columns with RelWidth and showing / hiding vertical scrollbar slows down the grid, especially for tree.
new 7.0 <Cfg> int

RoundVScroll

If set, to this will be all vertical scroll steps rounded.
For example set it to 18, if your rows are 18 pixels high (default in many styles) to scroll always to the whole rows.
chg 7.0 <Cfg> bool

NoScrollAfterExpand

[1]
If set to 0, TreeGrid scrolls down if the children are not shown all.
If set to 1, when expanding row, does not scroll into view the row's children - the icon always stays under mouse cursor.
Since 7.0 the default value is 1.
new 10.0 <Cfg> bool

PositionFixed

[0]
Set it to 1 if the grid is placed in tag with CSS position:fixed;
new 7.0 <Actions>

Scroll

Mouse dragging action, only for OnDrag... event
Starts scrolling grid section (columns or rows) under mouse cursor. Scrolls in both directions.
See also CustomScroll and TouchScroll attributes.
new 10.0 chg 12.0 <Actions>

ScrollAuto

Mouse dragging action, only for OnDrag... event
Starts scrolling grid section (columns or rows) under mouse cursor. Scrolls in both directions.
If the scrolling shift is too small, it does nothing and permits default action.
Use with NoVScroll or NoHScroll to have default scroll in one direction and TreeGrid scroll in the other direction.
For example on iPad set <Cfg NoVScroll='1'/> <Actions OnDrag1Row="ScrollAuto"/> to use default vertical scroll for whole page and horizontal scroll for individual column sections (e.g. Gantt chart).
Since 12.0 it is not attached to any event by default to use default scrolling behavior. You can attach it to OnDrag1Row and OnDrag1Gantt events for behavior prior to 12.0.
It is disabled on tablets if set MomentumScroll (it is on by default).
new 10.0 <Actions>

ScrollTouch

Mouse dragging action, only for OnDrag... event
The same action like ScrollAuto, but in Gantt it works only if no Gantt object is focused.
To avoid unwanted scroll when misses the Gantt object while trying to drag it.
Usually used with TouchClearFocused set to some short time.
upd 6.5 API event void

OnScroll

(TGrid grid, int hpos1, int vpos, int oldhpos1, int oldvpos, int hpos0, int oldhpos0, int hpos2, int oldhpos2)
Called after body was scrolled
hpos1 is new middle scrollLeft, vpos is new scrollTop, oldhpos1 is original middle scrollLeft, oldvpos is original scrollTop, all in pixels.
(new 6.5) hpos0, oldhpos0, hpos2, oldhpos2 are values for left and right column section.
renamed 6.0 API method bool

Update

( )
Updates grid layout, especially scrollbars.
Call it after all changes inside or outside the grid that affect grid size and are not recognized by the grid automatically or to update layout immediately after the change occurs.
Call it if you modify cell content directly without API and the cell changes its height. Or when you do some action that resizes main tag.
Returns true for success and false if grid cannot be shown and the error message "Too small extents" is displayed.
new 6.0 API method void

UpdatePos

( )
Updates information about position and size of the parent tags - the absolute position of grid on page. Updates also all absolute cursor positions.
Call it after all changes outside the grid that affect grid position and/or size and are not recognized by the grid automatically or to update layout immediately after the change occurs.
Call it if you modify html page layout and grid main tag moves inside page flow to another position. Or when parent tag with overflow set (if any) resizes.
Call it especially when grid is placed inside tag with overflow set or grid does not show scrollbars (<Cfg NoScroll='1' or NoHScroll='1' or NoVScroll='1'/>).
API method void

ScrollIntoView

(TRow row, string col, int pagepos = null)
Scrolls grid to show the cell [row,col]. The grid is scrolled as little as possible to show the cell.
If row represents a page set pagepos to expected row's position (index) at this page (when server paging used and page is not loaded yet).
If you want to scroll to exact position, you can use SetScrollTop and GetRowTop methods.
new 6.0 API method TRow[ ]

GetShownRows

( )
Returns an array of all rows actually visible by scroll.
new 6.0 upd 6.5 API method TRow[ ]

GetShownCols

(int sec = 1)
Returns an array of all column names actually visible by scroll.
(new 6.5) The sec is column section (0 - left, 1 - middle, 2 - right)
new 6.3 <Cfg> int

ScrollLeft

Can be saved to cookies if set <Cfg ScrollLeftLap='0'/>
Initial horizontal scroll of middle (variable) columns, in pixels.
new 6.5 <Cfg> int

LeftScrollLeft

Can be saved to cookies if set <Cfg ScrollLeftLap='0'/>
Initial horizontal scroll of left columns, in pixels.
new 6.5 <Cfg> int

RightScrollLeft

Can be saved to cookies if set <Cfg ScrollLeftLap='0'/>
Initial horizontal scroll of right columns, in pixels.
new 6.0 upd 6.5 API method int

GetScrollLeft

(int sec = 1)
Returns actual horizontal scroll of body, in pixels.
(new 6.5) The sec is column section (0 - left, 1 - middle, 2 - right)
new 6.0 upd 6.5 API method int

SetScrollLeft

(int pos, int sec = 1)
Sets new horizontal scroll of body, in pixels.
(new 6.5) The sec is column section (0 - left, 1 - middle, 2 - right)
new 6.0 API method int

GetColLeft

(string col)
Returns position of column within its section, in pixels
The return value can be used to SetScrollLeft method to scroll exactly to the column.
new 6.2 upd 6.5 API method int

GetBodyWidth

(int sec = 1)
Returns inner width of the variable columns area (clientWidth of the body).
Can be used width GetColLeft and GetScrollLeft to compute exact visibility and position of some variable column.
(new 6.5) The sec is column section (0 - left, 1 - middle, 2 - right)
new 7.0 API method int

GetBodyScrollWidth

(int sec = 1)
Returns scroll width of the given columns area - sum of all visible columns Width in the given area.
new 6.3 <Cfg> int

ScrollTop

Can be saved to cookies if set <Cfg ScrollTopLap='0'/>
Initial vertical scroll of body, in pixels.
new 6.0 API method int

GetScrollTop

( )
Returns actual vertical scroll of body, in pixels.
new 6.0 API method int

SetScrollTop

(int pos)
Sets new vertical scroll of body, in pixels.
new 6.0 API method int

GetRowTop

(TRow row)
Returns position of variable row or page within body, in pixels.
The return value can be used to SetScrollTop method to scroll exactly to the row.
new 6.2 API method int

GetBodyHeight

( )
Returns inner height of the variable rows area (clientHeight of the body).
Can be used width GetRowTop and GetScrollTop to compute exact visibility and position of some variable row.
new 7.0 API method int

GetBodyScrollHeight

( )
Returns scroll height of the body - sum of heights of all pages.
API variable bool

Rendering

[0]
If grid is rendering now.
You should not call any API function that modifies TreeGrid HTML while it is rendering (or Loading).
You can set Rendering to true, if you plan to show or hide many rows to speed up the action. After finish, you need set Rendering to false and call function Update to update grid layout.

Media rules - responsive design

TreeGrid can apply different attributes for different screen sizes, like CSS @media rule.
It is possible to show / hide particular rows, columns or space cells. Change column width or height. Or change any other configuration attributes, especially for grid size.
It is not possible to change row or column order. It is not possible to add new or remove existing rows or columns.
It is possible to change default rows attributes, but it is not possible to change default columns attributes.
The items changed by Media should not be saved to / loaded from cookies. The loaded configuration for these items is overwritten by original values.

Example:
<Media>
   <M MaxWidth="1024">
      <Cols>
         <C Name="A" Visible="0"/> <C Name="B" Width="50"/>
      </Cols>
      <Rows>
         <I id="Toolbar" Visible="0"/>
      </Rows>
      <Cfg NoHScroll="1"/>
      <Lang>
         <MenuCfg Caption="Small caption"/>
      </Lang>
   </M>
   <M MaxHeight="800">
      <Rows>
         <I id="Filter" Visible="0"/> <I id="Header" Visible="0"/>
      </Rows>
   </M>
</Media>
new 12.1 <Media>

<M>

<M> tag defines individual one media settings.
It can be placed in root <Media> tag.
It contains its specific attributes to determine if the rule will be applied or not like MaxWidth or MinHeight.
If there is no such attribute, the media rule is applied always.
If more media <M> tags fulfill actual conditions, they are applied in the order they are defined.

The <M> tag can contain only these sub tags to set their attributes to grid:
<Cols> - contains individual columns as <C> tags with at least Name attribute to identify the column to change.
<Rows> - contains individual rows as <I> tags, including fixed and space rows, with at least id attribute to identify the row to change.
<Def> - contains default rows as <D> tags with at least Name attribute to identify the default row to change.
<Lang> - contains all Lang sub tags like <Format> or <Text> to change particular language settings.
<Cfg> - contains attribute to change in configuration.
<MenuCfg>, <MenuColumns>, <MenuPrint>, <MenuExport> - contains attributes to change in particular menu.
<Actions> - contains attributes to change in action schema.
new 12.1 <M> string

Tag

What will be tested against the MaxWidth, MinWidth, Width, MaxHeight, MinHeight, Height attributes.
If set to empty string (default), tests actual viewport (window.innerWidth, window.innerHeight).
If set to 1, tests grid main tag clientWidth / clientHeight.
If set to id of some HTML tag on page, it tests this tag clientWidth / clientHeight.
If set, the tag size must not be affected by grid size or the grid size must not be affected by the media changes.
new 12.1 <Cfg> string

MediaTag

[""]
Default value used for all Media Tags.
new 12.1 <M> string

Media

The <M> rule will be applied only on given media device. Case insensitive keyword. If not set, the rule is used for all devices.
Screen - screen device, both desktop and tablets.
Desktop - screen device, controlled primarily, but not only, by mouse and keyboard.
Tablet - touchscreen device, controlled primarily by fingers.
Print - printer device or print to PDF. Ignores all <M> size attributes like MaxWidth.
Export - export to Xlsx/Xls/Csv. Ignores all <M> size attributes like MaxWidth.
new 12.1 <M> int

MaxWidth

The <M> rule will be applied only if the browser window width is less or equal to given value in pixels.
new 12.1 <M> int

MinWidth

The <M> rule will be applied only if the browser window width is greater or equal to given value in pixels.
new 12.1 <M> int

Width

The <M> rule will be applied only if the browser window width is equal to given value in pixels.
new 12.1 <M> int

MaxHeight

The <M> rule will be applied only if the browser window height is less or equal to given value in pixels.
new 12.1 <M> int

MinHeight

The <M> rule will be applied only if the browser window height is greater or equal to given value in pixels.
new 12.1 <M> int

Height

The <M> rule will be applied only if the browser window height is equal to given value in pixels.
new 12.1 <M> string

Style

The <M> rule will be applied only if the grid has given style. The Style is <Cfg Style> as style prefix like "GM" or "GE".
Media are not applied recursively, it is not possible one media to change grid style and other media to test style and change something else.
new 12.1 <Cfg> int

MediaChange

[1]
What action will be done if window size is changed when grid is already rendered and some media changed some attribute.
0 - nothing will be done, media are applied only on grid load.
1 - grid will be re-rendered after every change done by media.
2 - grid layout will be updated after every change done by media. Use if media changes only grid size attributes like MaxHeight or NoHScroll.
It is ignored if some media changed <Cfg Style/>.
new 12.1 API event bool

OnMediaApply

(TGrid grid, bool start)
Called before media are applied to grid. Return true to cancel the action.
start is true when the change is applied first time on grid load.
new 12.1 API event bool

OnMediaApplied

(TGrid grid, bool changed, bool start)
Called after media are applied to grid, but before the grid is re-rendered. Return true to not re-render the grid.
changed is set if some media changed some grid attribute.
start is true when the change is applied first time on grid load. In this case the return value is ignored.
new 12.1 API event bool

ApplyMedia

( )
Applies media changes for actual state. Returns true if something was changed.
It calls OnMediaApply and OnMediaApplied.
new 12.1 API variable object[]

Media

Array of all media rules in grid.
The individual objects contain properties like Cols, Rows, Cfg, ... with the individual settings.
And its property Attrs contains the <M> attributes like MaxWidth.