News in versions: FastGrid 1.0, TreeGrid 17.0
FastGrid FastSheet ExamplesSamples DocumentationDoc Download Licensing Prices Buy Development
services
References References Contacts
TreeGrid Gantt chart SpreadSheet ExamplesSamples DocumentationDoc Download Licensing Prices Buy Contacts
FastGrid documentation
Search in documentation
FastGrid versions compatibility

Changes log (txt file) Compare FastGrid 1.0 & TreeGrid 17.1

Using in JavaScript frameworks

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

Data and creating FastGrid

Simple examples of creating FastGrid Create FastGrid Display grid Access grid by API Sheets, more grids switched in one place Layout and configuration Data rows, columns, toolbars, images Changes in data rows, columns, toolbars Saving changes to server Mark changes Loading children on expand parent Short format

Layout - grid parts

Parts - ColParts and RowParts Part size Part scroll position Sets Column sets Row sets

Toolbars

Toolbar Cells Icon Height Width Toolbar position Dragging and manipulating cells Special toolbars

Rows and columns
Default rows, columns, cells, toolbars
Row and column identity

Row / column id Row / column index Row / column name

Row and column manipulation

API to get grid objects Auto added columns & rows on scroll Blocks of rows / columns Adding / copying / moving Deleting Showing and hiding Layout menu Selecting rows and columns Fill cell values by dragging Locking grid against changes Undo & redo

Row and column tree

Row and column tree Row tree Column tree Expand & collapse

Cells
Cell values and attributes

Read and write any values by API Cell value Cell attributes Cell value & attributes in UTF8 Store

Editing cells

Editing During editing Validation and errors

Cell images

Row cell side icons Icons definition Mark icons and charts Mark icons list Row cell floating images

Cell size

Row height Column width Resizing rows and columns Padding Margin Cell span

Cell style

Grid style and look Cell style permissions Cell style Cell outer border Cell inner border Alternate row & column background

Other cell features

Cell hyperlink Cell tooltip Static cells Other cell attributes Row & column attributes to speed up

Cell types and formats
Cell type and format Range - more values / ranges in cell String type Html type Auto type
Bool type

Bool type Check side icon Bool type & Check side icon

Number type

Format Localization

Date type

Format Localization Calendar

Calculations - formulas
JavaScript formulas

JavaScript formulas Aggregate functions String aggregate functions Other functions

Editable formulas

Formula rules Formula attributes Defined names for editable formulas 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

Dialogs and menus

Dialog Dialog Place Dialog API Menu definition in Script Cell menu List Suggest

Features
Sorting rows / columns

Sorting Sorting settings Comparing strings

Grouping rows / columns

Grouping Grouping settings Comparing strings Pivot grid

Filtering rows and columns

Filtering Filter settings Comparing strings

Search in cells Import files to grid
Export files

Export files Export and copy to clipboard CSV data

Copy & paste via system clipboard

Copy & paste Copy to clipboard Paste from clipboard

Printing

Print Print to PDF

Global grid settings
Grid size & scroll

Grid size Grid scrollbars Paging and view Media rules - responsive design

Saving settings in storage or cookies
Focus and hover cells

Focus cell and cell ranges Mouse hover cells Highlight cells, rows and columns

Events

Mouse events Key events API events

Language

Translation Languages

Messages

Message Message style

Other API

API for iterating rows and columns Paint and repaint Various API methods

Debug & files

Debugging FastGrid files

UTF8 Store - fast & short data
Introduction - License & download

Basic description Main advantages Basic usage License Download Documentation

Script language implementations

JavaScript C# JAVA PHP

Suggested ucodes

Bits - small integers or enums Integers or enums with strings Date and time Floating point numbers Special strings

Basic ucodes

Integer 1 char String 1 char Date 1 char Bits 1 char Integer 2 chars String 2 chars Date 2 chars Float 2 chars Integer 3 chars String 3 chars Date 3 chars Integer and double float 5 chars String 5 chars Date 5 chars Fixed length string Separated strings Adjacent strings Prefix for escaping string Fixed length data Unused custom codes Prefix for stored separator or length Prefix for stored base number Unused basic ucodes

Complex ucodes

chars signed decimals multiple limits varstrings escape base chars2 signed2 decimals2 multiple2 limits2

Internal coding Profiling times for ucode options Function reference
ColTree

Row and column tree

FastGrid documentation

To display row tree set Tree attribute of the Part and define tree level of the rows by L attributes.
To display column tree set Cfg ColTree attribute and define tree level of the columns by L attributes.
Row, Col int

L

[0] GetAttr Indent, Add
Row / column level in tree. -1 is not expandable root level without tree buttons, 0 is root expandable level, >=1 are child expandable levels.
If the row / column has higher level than previous row / column (next for ReversedTree), it is a child row / column of the previous row / column.
In row the L specifies also indent in Tree column by TreeWidth pixels.
The row / column children can be hidden / shown by collapsing / expanding the parent.
The row / column children are usually manipulated (moved / copied / deleted / hidden) with their parent.
Actions

IndentRow / IndentCol

(int target = 0, int level = 1, bits options = 0, bits hidden = 0) OnClickIndent
Increases the actual or focused row / column L by given level. The level can be negative.
Parameters options and hidden are the same as in Indent.
It fails if not set DraggingRows / DraggingCols.
Actions

IndentRows / IndentCols

(int target = 0, int level = 1, bits options = 0, bits hidden = 0, int min = 0) OnClickIndent
Increases the selected or focused rows / columns L by given level. The level can be negative.
min - minimal count of the selected / focused rows / columns for the action success.
If min = 0 and target = 5 it returns false if the action modifies the same rows / columns as action HideRow / HideCol.
Parameters options and hidden are the same as in Indent.
It fails if not set DraggingRows / DraggingCols.
Grid method Row / Col / Row[] / Col[]

Indent

(Row / Col / Row[] / Col[] src = null, int level = 1, bits options = 0, bits hidden = 0)
Increases the row / column L by given level. The level can be negative.
The row / column is not changed if it has set NoMove attribute except if set 3.bit of options.

src specifies the row(s) / column(s) that are deleted / undeleted / removed.
It can be one Row or Col object or array of Row or Col objects - all the objects must be from the same grid and of the same kind (Row or Col).

options specifies various options, bit array:
1.bit&1 = 1 - saves changes, sets the row / column as moved.
2.bit&2 = 2 - reserved
3.bit&4 = 4 - ignores NoMove, changes the L regardless on the permission.
4.bit&8 = 8 - without children, modifies only given items, without their child rows / columns.
5.bit&16 = 16 - without Block, modifies only given items, not all items with the same Block.
6.bit&32 = 32 - only visible, but still modifies collapsed children if not set with 8.

hidden specifies what to do if new parent is collapsed, hidden or deleted: , bit array:
1.,2.bit&3If new parent is collapsed: 0 - restrict change, 1 - expand the parent, 2 - hide the modified row / column, 3 - ignore - permit the change and do nothing.
If outdents collapsed row / column and it gets more children, it is expanded for values 1 and 2.
3.,4.bit&12If new parent is hidden: 0 - restrict change, 4 - show the parent, 8 - hide the modified row / column, 12 - ignore - permit the change and do nothing.
5.,6.bit&48If new parent is deleted: 0 - restrict change, 16 - undelete the parent, 32 - delete the modified row / column, 48 - ignore - permit the change and do nothing.

Returns modified Row or Col (for src = object) or array of modified Rows / Cols (for src = array).
Or returns null if no rows / columns were modified.
API event bool

OnIndent

(Grid grid, Row[] / Col[] items, int level, bool test)
Called before row(s) or column(s) in items have increased the L attribute by given level. Called from Indent method.
test is true if just testing possibility of changing, e.g. to display the action in popup menu.
Return true to cancel the action.
The event handler can modify the items to indent different row(s) / column(s).
API event void

OnIndented

(Grid grid, Row[] / Col[] items, int level)
Called after row(s) or column(s) in items have increased the L attribute by given level. Called from Indent method.
Cfg bits

ReversedTree

[0] GetCfgAttr SetReversedTree
If the row and column tree is reversed like default tree in MS Excel.
1.bit &1 = 0 - row children are below their parent. 1 - row children are above their parent.
2.bit &2 = 0 - column children are right to their parent. 2 - column children are left to their parent.
3.bit &4 = 4 - if set and the row tree in data is in different direction, the rows will be reversed to satisfy the first bit.
4.bit &8 = 8 - if set and the column tree in data is in different direction, the columns will be reversed to satisfy the second bit.
Grid method bool

SetReversedTree

(int value)
Sets ReversedTree to the value.
Returns true on change, false without change.
Moves the rows / columns to satisfy the order, like if if set ReversedTree&12.
API event bool

OnSetReversedTree

(Grid grid, bits reversedtree)
Called before ReversedTree changed to reversedtree. Called from SetReversedTree method.
Return true to suppress the change.
API event void

OnReversedTree

(Grid grid, bits changed)
Called after rows / columns order changed due change of ReversedTree. Called from SetReversedTree method.
changed &1 - changed rows, &2 - changed columns.
Cfg bits

ExpandDigits

[3] GetCfgAttr SetCfgAttr
If and how displays count of children in the expand icon.
-1 does not display digits, displays only plus.
>=0 displays digits as count of collapsed children, bit array: &1 = only visible (ignores filtered and manually hidden), &2 = only expanded (ignores children of collapsed parent, except the immediate), &4 = only immediate (children directly in the parent), &8 = only leaf (items without children).

Row tree

Row tree is displayed in row cells in one column. The column can be different per row part or even per row.
? Cfg int

RowTree

[1] GetCfgAttr
If and where the row tree is displayed.
0 - Row tree is not displayed. Existing row L attributes are ignored.
1 - Row tree is displayed in one column per part set by part Tree attribute. If part has not Tree attribute, the tree is not shown, but row's L attribute is still used.
2 - Row tree can be displayed in different column in every row by row Tree attribute. If row has not Tree attribute, the part Tree is used. It can slow down the row manipulation, especially adding many new rows!

The RowTree cannot be changed by API, it is only possible to just hide / show the row tree by setting the part Tree or row Tree attribute.
RowPart string

Tree

GetPartAttr SetTree
Column id where to display row tree lines and expand / collapse buttons in the part. Used only if set RowTree >= 1.
Grid method bool

SetTree

(string part, string / Col col)
Sets part Tree attribute to col.
Returns true for change, false for no change and null for error.
Grid method bool

HasRowTree

( )
Returns true if the grid shows row tree.
Grid method Col

GetTreeCol

(Row row)
Returns column where the row shows its row tree or null.
Row string

Tree

GetAttr
Column id where to display row tree lines and expand / collapse buttons in the row. Used only if set RowTree = 2.
If not set, the part Tree attribute is used.
It is strongly recommended to display the same level (L value) always in the same column, otherwise the levels relation will be confusing for users.
Row string[]

LevelsPart

GetAttr SetAttr
If set, it displays buttons for expanding individual row levels in this row in the part Tree column.
It is usually set in Header row as LevelsPart = "Body" to display buttons for expanding levels in Body.
It can contain one part id or array or comma separated string of the part ids.
The row can control also its own row part.

For RowTree = 2, to specify also column where to display the buttons for the column, add it with "$" as suffix to the part.
For example LevelsPart = "Body,Body$Col1,Body$Col4,Foot$Col2".
Cfg, Col int

TreeLines

[1] / [3] GetCfgAttr SetCfgAttr
If and how will be displayed the vertical tree lines.
3 - shows vertical and horizontal lines in tree plus cross line from button to children line and hides the root tree (on L = 0) in rows without children.
2 - shows vertical and horizontal lines in tree plus cross line from button to children line.
1 - shows vertical and horizontal lines in tree.
0 - hides the lines in tree, shows only expand / collapse icons.
-1 - hides the lines in tree, shows only expand / collapse icons. Leaf child rows (without icon Expand / Collapse) are shown on the same level as their parent.
Cfg int

TreeWidth

[14] GetCfgAttr SetCfgAttr
Indent in Tree cell per one level in pixels. Minimal value for normal display with tree lines or LevelsPart buttons is 7.
Cfg int

TreePaddingLeft

[5] GetCfgAttr SetCfgAttr
Space in Tree cell between left cell edge and tree line / icon.
Cfg int

TreePaddingRight

[5] GetCfgAttr SetCfgAttr
Space in Tree cell between tree icon and cell text (added to cell's PaddingLeft).
Cfg int

LevelsNarrow

[13] GetCfgAttr SetCfgAttr
If TreeWidth is less or equal to this value, the LevelsPart buttons are displayed narrow.
Cfg bits

LevelsCollapse

[0] GetCfgAttr SetCfgAttr
1. bit &1 - if set, Levels button collapses all levels, otherwise it collapses only actual level.

Column tree

Column tree is displayed in special row Part Type="Tree". There can be more such parts in grid, to display tree for different column sets.
Cfg bool

ColTree

[0] / [1] GetCfgAttr
If shows column tree in row Part Type="Tree".
By default there is defined one row Part { id:"Tree", Type:"Tree", Add:1 } in RowParts above header, below to top toolbar. But the ColTree is set to 0 to disable the column tree by default.
The ColTree cannot be changed by API, it is only possible to just hide / show the column tree by setting the part Hidden attribute.
Grid method bool

HasColTree

( )
Returns true if the grid shows column tree.
RowPart bits

Up

[0] GetPartAttr SetPartAttr
Vertical direction of the row Part Type="Tree", bit array:
1.bit &1 - vertical lines go from bottom to top.
2.bit &2 - order of rows is reversed, the first row starts bottom.
RowPart bool

Add

[0/1] GetPartAttr SetPartAttr
If set, adds one empty row bottom the row Part Type="Tree" to display one more Levels button to expand all columns, including last level.
Default value is 0, but the default row Part id="Tree" has set Add = 1.
RowPart string

S

GetSet SetSet
ColSet id its tree is displayed in this row Part Type="Tree". The columns for the ColSet are defined in {Part id}${Set id}
Col, Cell string[]

LevelsPart

GetAttr SetAttr
If set to column, it displays buttons for expanding individual column levels in this column in the Tree part for given column parts.
If set to column or cell, it displays buttons for expanding individual column levels in this cell for given column parts, if the cell have set also RightIcons = "ColLevels".
It is usually set in Index column as LevelsPart = "Cols" to display buttons for expanding column levels in Cols.
It can contain one part id or array or comma separated string of the part ids.
The column can control also its own column part.
Cfg int

ColTreeLines

[2] GetCfgAttr SetCfgAttr
If the lines will be displayed in column tree.
0 - hidden; displayed are only expand / collapse icons.
1 - shown for expanded columns; for collapsed column is shown only expand icon.
2 - shown for both collapsed and expanded columns; for collapsed column is shown line just for the column width.
Cfg int

ColTreeHeight

[10] GetCfgAttr SetCfgAttr
Height of one row in column tree part, in pixels. Minimal reasonable value is 5.
Cfg int

ColTreePaddingTop

[5] GetCfgAttr SetCfgAttr
Space above the first row in the column tree part, in pixels.
Cfg int

ColTreePaddingBottom

[4] GetCfgAttr SetCfgAttr
Space below the last row in the column tree part, in pixels.
Cfg int

ColTreePaddingLeft

[2] GetCfgAttr SetCfgAttr
Space between column left edge and the expand / collapse icon, in pixels.
If set to null, the icon is centered in the column width.
Cfg int

ColTreePaddingRight

[0] GetCfgAttr SetCfgAttr
Space between column right edge and the tree vertical line.
If set to null, the line is centered in the column width.
Cfg int

ColLevelsNarrow

[6] GetCfgAttr SetCfgAttr
If ColTreeHeight is less or equal this value, the levels buttons are displayed narrow.
Cfg int

ColLevelsShift

[13] GetCfgAttr SetCfgAttr
If ColTreeHeight is less or equal this value, the levels buttons are displayed in two columns shifted by ColLevelsShiftWidth.
Cfg int

ColLevelsShiftWidth

[19] GetCfgAttr SetCfgAttr
Shift of the levels buttons in pixels if displayed in two columns due ColLevelsShift.
Cfg int

ColLevelsAlign

[0] GetCfgAttr SetCfgAttr
Alignment of the levels buttons inside its column, 0 - left, 1 - right, 2 - center.
Cfg string[]

ColLevelsRows

GetCfgAttr SetCfgAttr
Comma separated list or array of row ids, one for every column level. These rows are shown or hidden on expand or collapse particular column level. The rows are shown/hidden only if the first row is visible.

Expand & collapse

Row, Col bool

Collapsed

[0] IsCollapsed Collapse
If the row or column is collapsed (hides its children).
Row, Col bool

NoCollapse

[0] GetAttr SetAttr
If set, the row / column cannot be expanded / collapsed (cannot show / hide its children).
Part int / object

CollapseLevel

GetPartAttr SetPartAttr
If set, collapses all tree levels under this value and expands all levels higher or equal to this value. On grid start and on grouping change.
The rows / columns are expanded / collapsed up to given level. Rows / columns with L less than level are expanded (show their children).
Rows / columns with L higher or equal than level are collapsed (hide their children).
level = -1 expands all rows / columns. level = 0 collapses all rows / columns.
level = -2 expands all except the last level, -3 expands all except two last levels, ...
It highlights appropriate LevelsPart button.
For RowTree = 2 it can be an object as values for individual Tree column ids, e.g. CollapseLevel:{Col1:2,Col7:-1}.
Row, Col int

CollapseLevel

GetAttr SetAttr
It can be set to number to use instead of row / column L when collapsing / expanding all rows / column on given level or Part CollapseLevel.
It can be set negative, to be calculated from right, from maximal level-1.
For example if set to -1, the row / column will be expanded and its children will be shown when expanding only the last level.
All rows / columns in the same parent should have the same value of the CollapseLevel.
Cfg string[]

CollapsedRows

Array or comma separated string of ids of rows that will be collapsed on start.
If CollapsedRows are defined more times in the input data, they are joined together, except if the first item is "-".
Cfg string[]

ExpandedRows

Array or comma separated string of ids of rows that will be expanded on start.
If ExpandedRows are defined more times in the input data, they are joined together, except if the first item is "-".
Cfg string[]

CollapsedCols

Array or comma separated string of ids of rows that will be collapsed on start.
If CollapsedCols are defined more times in the input data, they are joined together, except if the first item is "-".
Cfg string[]

ExpandedCols

Array or comma separated string of ids of rows that will be expanded on start.
If ExpandedCols are defined more times in the input data, they are joined together, except if the first item is "-".
Actions

CollapseRow / CollapseCol

(int target = 0, int collapse = null, int levels = null) OnClickCollapseRow/Col, OnClickCollapse
Expands or collapses actual or focused row / column.
Parameters collapse and levels are the same as in Collapse.
Actions

CollapseRows / CollapseCols

(int target = 0, int collapse = null, int levels = null, int min = 0) OnClickCollapse
Expands or collapses selected or focused rows / columns.
min - minimal count of the selected / focused rows / columns for the action success.
If min = 0 and target = 5 it returns false if the action modifies the same rows / columns as action CollapseRow / CollapseCol.
Parameters collapse and levels are the same as in Collapse.
Actions

CollapseAllRows / CollapseAllCols

(int target = 0, int level = 0, int min = 0) OnClickCollapse
Expands or collapses all rows / columns in grid.
min - minimal count of the rows / columns that can be expanded / collapsed for the action success.
The rows / columns are expanded up to given level. Rows / columns with L less than level are expanded (show their children).
Rows / columns with L higher or equal than level are collapsed (hide their children).
level = -1 expands all rows / columns. level = 0 collapses all rows / columns.
Actions

CollapseLevel

(int target = 0) OnClickCollapseRowLevel, OnClickCollapseColLevel
Special action that expands / collapses rows / columns up to level according to the clicked level button.
This action can be assigned only to OnClickCollapseRowLevel and OnClickCollapseColLevel events.
Grid method Row / Col / Row[] / Col[]

Collapse

(Row / Col / Row[] / Col[] src, int collapse = null, bits options = 0, int levels = null)
Expands or collapses given row(s) or column(s).
src specifies the parent row(s) / column(s) that are expanded / collapsed. It can be one Row or Col object or array of Row or Col objects - all the objects must be from the same grid and of the same kind (Row or Col).
collapse = 1 - collapse, 0 - expand, null - change the collapsed state (according to the first row / column collapsed state).
options specifies various options, bit array:
1.bit&1 = 1 saves changes.
2.bit&2 = 2 preserves the first expanded row under mouse for set ReversedTree.
3.bit&4 = 4 - ignores NoCollapse, expands / collapses all given items regardless on the permission.
If set levels, expands / collapses given number of levels deep. For -1 expands /collapses all levels of given rows / columns. For null expands / collapses one level.
Returns expanded / collapsed Row or Col (for src = object) or array of expanded / collapsed Rows / Cols (for src = array).
Or returns null if no rows / columns were modified.
Grid method bool

IsCollapsed

(Row / Col src)
Returns 1 if the row / column is collapsed (hides its children).
If the child is hidden due collapsed parent is possible to find out by IsHidden, 3.bit (&4).
Grid method bool

CollapseAll

(int level, bool cols = 0, bits options = 0)
Expands or collapses all rows (cols = 0) / columns (cols = 1) in grid.
The rows / columns are expanded / collapsed up to given level. Rows / columns with L less than level are expanded (show their children).
Rows / columns with L higher or equal than level are collapsed (hide their children).
level = -1 expands all rows / columns. level = 0 collapses all rows / columns.
level = -2 expands all except the last level, -3 expands all except two last levels, ...
options specifies various options, bit array:
1.bit&1 = 1 saves changes.
6.bit&32 = 32 - ignores NoCollapse, expands / collapses all given items regardless on the permission.
Returns true if some row / column collapsed state was changed, otherwise false.
It can be run asynchrounsly when applied SyncRows.
Grid method bool

ExpandParents

(Row / Col src)
Expands all parents of the row / column to make the row visible.
Returns true if some row / column collapsed state was changed, otherwise false.
API event bool

OnCollapse

(Grid grid, Row[] / Col[] items, int collapse, bool all, bool test)
Called before row(s) or column(s) in items are expanded / collapsed. Called from Collapse (all = 0) or CollapseAll (all = 1) method.
collapse = 0 - expand, 1 - collapse.
test is true if just testing possibility of expanding / collapsing, e.g. to display the action in popup menu.
Return true to cancel the action.
The event handler can modify the items to expand / collapse different row(s) / column(s).
API event void

OnCollapsed

(Grid grid, Row[] / Col[] items, int exp, bool all)
Called after row(s) or column(s) in items are expanded / collapsed, but before Paint. Called from Collapse (all = 0) or CollapseAll (all = 1) method.
collapse = 0 - expand, 1 - collapse.