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

Focus and hover cells

FastGrid documentation

Focus cell and cell ranges

Focused cell is the cell that receives key events.
Focused row is the row containing focused cell.
Focused column is the column containing focused cell.
First focused range is cell rectangular range that contains focused cell, it is used by actions taking focused cells.
Next focused ranges are cell rectangular ranges that don't contain focused cell, they are used by actions taking focused cells.
Focused ranges are defined as [row1,col1,row2,col2]. The rows or columns can be missing in the definition to focus the whole columns or rows.

Default focus and select behavior is for grid - focus single cell and independent row and column selection.
For sheet focus and select behavior set Cfg: { Focus:51, SelectRows:0, SelectCols:0 } - focus cell ranges and manipulate them.
Cfg string[]

Focused

[ ] / ["A1"] GetFocus SetFocus
Focused cell(s) on grid start. It can be set as array of strings or comma separated string.
First pair is focused row and focused column, next quaternions are focused cell ranges, the first quaternion can contain the focused cell to be used as the first focused cell range.
It can be set also as cell names and cell name range like in editable formulas.
For example:
Focused: [2,"E",1,"D",3,"G",5,"A",7,"C",9,"B",11,"G",13,null,14,null,null,"H",null,"I",4,"A",null,null] - items by ids
Focused: "2,E,1,D,3,G,5,A,7,C,9,B,11,G,13,,14,,,H,,I,4,A,," - items by ids
Focused: ["E2","D1:G3","A5:C7","B9:G11","13:14","H:I","A4"] - items by indexes, can add auto rows / columns
Focused: "E2,D1:G3,A5:C7,B9:G11,13:14,H:I,A4" - items by indexes, can add auto rows / columns
Focused cell is "E2", first focused range is "D1:G3".
Cfg bool

IgnoreFocused

[0] GetCfgAttr SetCfgAttr
If set, ignores Focused attribute on start. Ignores also focus and selection settings in xlsx.
Cfg int

Focus

[1] / [3] GetCfgAttr SetCfgAttr
If and how the table cells can be focused.
0 - no cell focus, 1 - single cell focus, 2 - cell range focus, 3 - more cell ranges focus.
Cfg bits

FocusActions

[0] / [3] GetCfgAttr SetCfgAttr
1. bit &1 - if shows bottom right corner in focused cell range for auto fill. Applicable only for Focus = 2 or 3.
2. bit &2 - if permits moving and copying focused cell range by dragging its edge.
Cfg bits

FocusActionsTouch

[0] / [1] GetCfgAttr SetCfgAttr
Used instead of FocusActions on touch screen.
Cfg int

FocusRow

[2] / [1] GetCfgAttr SetCfgAttr
If and how the whole row will be highligted for focused cell.
0 - no, only the focused cell will be highlighted, 1 - the row in the same columns section will be highlighted, 2 - the whole row will be highlighted.
Part string[]

FocusRow

GetPartAttr SetPartAttr
List of ColPart ids that will be focused when focusing this part and Cfg FocusRow = 1.
If both ColPart and RowPart have set FocusRow, the ColPart attribute is preferred.
Cfg int

FocusCol

[2] / [1] GetCfgAttr SetCfgAttr
If and how the whole column will be highligted for focused cell.
0 - no, only the focused cell will be highlighted, 1 - the column in the same rows section will be highlighted, 2 - the whole column will be highlighted.
Part string[]

FocusCol

GetPartAttr SetPartAttr
List of RowPart ids that will be focused when focusing this part and Cfg FocusCol = 1.
If both ColPart and RowPart have set FocusCol, the RowPart attribute is preferred.
Cfg bool

FocusTool

[1] / [0] GetCfgAttr SetCfgAttr
If the toolbar cells can be focused.
Cfg int

ClearFocus

[1] / [0] GetCfgAttr SetCfgAttr
If the focus cursor will be cleared when the grid loses focus.
0 - no, the focused cell(s) will be still focused, although the focus in grid cannot be changed by keys.
1 - clears the focus when the grid loses focus.
2 - clears the focus also when clicked to empty area in the grid or to not focusable cells.
Cfg bits

AlignFocus

[15] GetCfgAttr SetCfgAttr
How the focused cell will be aligned in grid, bit array:
1.,2.bit&3vertical align, 0 - top, 1 - bottom, 2 - middle, 3 - inside - minimal scroll
3.,4.bit&12horizontal align, 0 - left, 4 - right, 8 - center, 12 - inside - minimal scroll
Cfg bits

AlignFocused

[10] GetCfgAttr SetCfgAttr
How the focused cell will be aligned in grid on start, bit array:
1.,2.bit&3vertical align, 0 - top, 1 - bottom, 2 - middle, 3 - inside - minimal scroll, usually bottom
3.,4.bit&12horizontal align, 0 - left, 4 - right, 8 - center, 12 - inside - minimal scroll, usually right
Cell bits

NoFocus

[0] GetAttr SetAttr
If cell focus is restricted, bit array:
1.bit&1the cell cannot be set as the focused cell, but still can be included in focused cell range.
2.bit&2does not highlight the whole focused row
3.bit&4does not highlight the whole focused column (highlight of whole column is disabled when defined more column sets).
The not focused cell can be still edited, to restrict editing cell set NoEdit=1.
Tool bits

NoFocus

[0] GetAttr SetAttr
&1 - if toolbar cell focus by mouse / touch is restricted.
&2 - if toolbar cell focus by arrow keys is restricted.
Cfg bool

CursorEdges

[1] GetCfgAttr SetCfgAttr
0 - does not display focus and hover border in edge cells, because it cannot be shown outside the part.
1 - displays focus and hover border also in edge cells, inside them.
Cfg int

CursorSpanned

[1] / [2] GetCfgAttr SetCfgAttr
If set to 1, shows cursor for the whole rows / column for whole spanned range instead of top left cell.
If set to 2, shows cursor for the whole rows / column also for the whole focused range instead of top left cell.
Cfg bool

NoFocused

[0] GetCfgAttr SetCfgAttr
If set, the grid does not catch key events, to control the grid keys from its parent grid or other component. Used for Suggest menu.
Cfg int

FocusEdge

[5] GetCfgAttr SetCfgAttr
Width in pixels of focus cursor edge for mouse hover.
Actions

Focus

(int target = 0, int action = 0) various OnClick...
Focuses actual cell.
action is the same as in SetFocus.
Actions

FocusEdit

(int target = 0, int action = 0, bool empty = 0) OnClickAny, OnCtrlClickAny
Focuses actual cell. If the cell is already focused cell, starts editing it.
For empty = 1 starts editing the cell with empty value instead of original value.
action is the same as in SetFocus.
Actions

FocusNext

(int target = 0, int dir = 0, bits options = 0, int tab = 0) various key events
Focuses next cell(s) in given direction dir = 0 - down, 1 - up, 2 - right, 3 - left.

options specifies various settings, bit array:
1.bit&1extend1 - extends actual focused rectangle in given direction. 0 - moves the focused cell.
2.bit&2pagemoves or extends the focus by the whole page.
3.bit&3editablemoves or extends the focus only to editable cell.

If set tab and the focused cell is the last one in given direction, moves focus to the next row / column and on the opposite edge of grid or focused range.
If there is focused range, the tab values more control the behavior: 1 - iterates spanned cell only once on the first row / column, 2 - iterates the spanned cell on every row / column, 3 - clears focused range and tabs only one focused cell.
Actions

FocusRow

(int target = 0, int action = 0)
Focuses the whole actual row.
action is the same as in SetFocus.
Actions

FocusCol

(int target = 0, int action = 0)
Focuses the whole actual column.
action is the same as in SetFocus.
Actions

FocusAll

(int target = 0, bool range = 0) OnClickFocusAll
Focuses the whole grid, all columns and rows.
If set range and only one cell is focused, it extends focus to the nearest surrounding range of cells.
Actions

DragFocus

(int target = 0, int type = 0, int action = 0, bits autofilltype = null) OnDragHeader, OnDragAny, OnCtrlDragHeader, OnCtrlDragAny
Focuses cells by mouse dragging.
type = 0 cells range, 1 - whole rows range, 2 - whole columns range.
action 0 set focus, 1 - add focus, 2 - remove focus, 3 - add or remove focus, 4 - extend and auto fill rows or columns, 5 - extend and auto fill rows and columns, 6 - move focused cells.
autofilltype is used for action = 4 / 5 auto fill, if not set, AutoFillType is used.

Grid method bits

SetFocus

(Row row = null, Col col = null, object range = null, int action = 0, int scroll = AlignFocus, bits options = 0)
Sets focused cell and range and updates next focused ranges.
row can be row or toolbar to focus. It can be null to focus the whole column.
col can be column or toolbar cell to focus. It can be null to focus the whole row.
If row and col are null, removes the focus from the grid.
range is array as [row1,col1,row2,col2] to focus as range or null to focus single cell.
If cell row, col is outside range, it adds the range to the next focused ranges if permitted by action or ignores it.

action specifies the focus action. It is used only if set Focus&3 = 3 otherwise 0 (set) is used.
0setsets focused cell to row and col and focused range to range and clears other focused ranges.
1addadds actual focused range (or focused cell if actual focused range is null) to next focused ranges and sets focused cell to row and col and focused range to range.
2removeremoved the cells in the range (or the cell row, col if range is null) from all focused ranges.
If the removed cells removed also focused cell and focused range, uses the last range from the next ranges as focused cell / range.
3add or removeit chooses 2 if cell row, col is focused, otherwise 1.
arrayset allaction can contain array of rects to be exactly set as the next focused rectangles. It always clears the previous focus and does not check if the focused area changed.

options specifies various settings, bit array:
1. bit&1showshow the cell - expand parent rows and columns, show hidden row and column.

scroll specifies if and how the focused cell will be scrolled into view, value the same as AlignFocus or -1 as no scroll.

Returns false if no change in focus was done, null if the focus cannot be changes.
For focus change returns positive number with more information as bit array: &1 - scrolled vertically, &2 - scrolled horizontally, &4 - Paint called, &8 - Paint needed, &16 - always set.

Paint is needed only if modified next focused ranges, by action > 0.
If not set options&8 it calls Paint if there are some pending changes in the part.
Grid method bits

SetFocus

(string cells, string rowpart = "Body", string colpart = "Cols", int action = 0, int scroll = AlignFocus, bits options = 0)
Variant of SetFocus method that focuses given cells by their indexes like SetFocus("A3;A2:B6;C6;C8:E10"). Only if set RowIndex and ColIndex.
If the cells do not exist, it creates enough rows in rowpart and cols in colpart to create the indexed cell.
The cells can contain also defined name containing cell reference.
The first item in cells can be a reference to single cell that is contained in the second cells range to specify main focused cell in the first focused rectangle.
If the cells contain cells from another sheet, it switches to the first sheet in cells and focuses the cells here.
action, scroll, options and return value are the same as default SetFocus method.
Grid method object

GetFocus

(bits str = 0)
Returns actually focused cells in one dimensional array.
First two items are focused row, focused column.
Next four items is focused range as top row, left col, bottom row, right col.
Next quaternions are next focused ranges, if any.
If there are focused whole rows or columns, the returned array never includes nulls, but includes the first and last column / row in grid and contains also attribute Full as array of integers for every focused rect as 1 - whole rows, 2 - whole columns.
If no cell is focused, returns empty array.
If set str, returns string as range of focused cells (like "A2;A1:C3;7:10"). For str&1 includes focused cell, for str&2 includes focused range, for str&4 includes other selected ranges.
Grid variable Row

FRow

Returns actually focused row or null.
Grid variable Col

FCol

Returns actually focused column or null.
Grid method int

IsFocused

(Row row = null, Col col = null)
Returns positive number if the cell is focused. Returns 1 if it is focused cell, 2 if it is in focused range or 3 if it is in next focused ranges.
The row or col can be null to check the whole row or column contains some focused cell.
Grid method bool

IterFocus

(function func, bool visible = 0)
Iterates all focused cell and for every cell calls func(row,col).
If the func returns true, the IterFocus ends.
The func is called only once for every the focused cell, even if the focused ranges overlap.
As the first cell it always gets focused row / focused column.
If set visible, iterates only visible rows and columns.
Grid method bool

ScrollIntoView

(Row row, Col col, object range = null, int scroll = AlignFocus)
Scrolls the part to make the row and / or col visible.
If set range as [row1,col1,row2,col2] makes the whole range visible. row1, col1 must be top left corner. In this case the row, col is used only if the range bigger than the view.
scroll specifies how the focused cell will be scrolled into view, value the same as AlignFocus.

Returns 0 if no change in scroll was done or positive number as bit array: &1 - scrolled vertically, &2 - scrolled horizontally, &4 - Paint called.
It calls Paint if there are some pending changes in the part.
Grid method bool

SetFocused

( )
Assigns key focus to this grid. Only one control on page can have key focus.
If the previous grid with key focus has set ClearFocus, removes also its focus cursor.
Returns true if the focused grid was changed.
Grid method bool

ClearFocused

( )
Removes key focus from this grid. If set ClearFocus, removes also focus cursor from the grid.
Returns true if the focused grid was changed.
API event bool

OnFocus

(Grid grid, Row row, Col col, object[] rect, int action, string drag, bool test)
Called before the focused cell(s) is changed to row, col and rect.
rect is set [top_row,left_col,bottom_row,right_col,whole], where whole can be 1 when focused whole rows, 2 whole columns or 3 all.
action is like the action in SetFocus.
drag is set when calling the OnFocus during dragging focus. After the focus is dragged, the OnFocus is always called again with drag as null.
test is set when just testing focus possibility, in this case the function should not do any action.
API event bool

OnFocused

(Grid grid, string drag)
Called after the focused cell(s) has been changed.
drag is set when calling the OnFocused during dragging focus. After the focus is dragged, the OnFocused is always called again with drag as null.

Mouse hover cells

Cfg bool

Hover

[1] GetCfgAttr SetCfgAttr
If the table cells are hovered = highlighted under mouse cursor.
Cfg int

HoverRow

[2] / [0] GetCfgAttr SetCfgAttr
If and how the whole row will be highligted for hovered cell.
0 - no, only the hovered cell will be highlighted, 1 - the row in the same columns section will be highlighted, 2 - the whole row will be highlighted.
Part string[]

HoverRow

GetPartAttr SetPartAttr
List of ColPart ids that will be hovered when hovering this part and Cfg HoverRow = 1.
If both ColPart and RowPart have set HoverRow, the ColPart attribute is preferred.
Cfg int

HoverCol

[2] / [0] GetCfgAttr SetCfgAttr
If and how the whole column will be highligted for hovered cell.
0 - no, only the hovered cell will be highlighted, 1 - the column in the same rows section will be highlighted, 2 - the whole column will be highlighted.
Part string[]

HoverCol

GetPartAttr SetPartAttr
List of RowPart ids that will be hovered when hovering this part and Cfg HoverCol = 1.
If both ColPart and RowPart have set HoverCol, the RowPart attribute is preferred.
Cfg bool

HoverTool

[1] GetCfgAttr SetCfgAttr
If the toolbar cells are hovered.
Cfg int

HoverImage

[-1] / [1] GetCfgAttr SetHoverImage
If the floating images are hovered.
If set to -1, the images are not hovered and HoverImage option is not displayed in Settings menu.
Cfg bool

ScrollHover

[1] GetCfgAttr SetCfgAttr
If set, updates hover cursor position during scrolling (may slightly slow down the scrolling). If not set, hides cursor during scrolling.
Cell bits

NoHover

[0] GetAttr SetAttr
If highlighting the cell under mouse is restricted, bit array:
1.bit&1does not highlight the individual cell.
2.bit&2does not highlight the whole row
3.bit&4does not highlight the whole column (highlight of whole column is disabled when defined more column sets).
Tool bool

NoHover

[0] GetAttr SetAttr
If highlighting the toolbar cell under mouse is restricted.
Cfg bool

CursorEdges

[1] GetCfgAttr SetCfgAttr
0 - does not display focus and hover border in edge cells, because it cannot be shown outside the part.
1 - displays focus and hover border also in edge cells, inside them.
Cfg int

CursorSpanned

[1] / [2] GetCfgAttr SetCfgAttr
If set to 1, shows cursor for the whole rows / column for whole spanned range instead of top left cell.
If set to 2, shows cursor for the whole rows / column also for the whole focused range instead of top left cell.
Cfg int

AnimateToolClick

[200/400] GetCfgAttr SetCfgAttr
If set, animates the hover cursor on click to toolbar cell for given count of milliseconds. On tablet it shows the hover cursor for this time too.
Default value is 200 for desktop and 400 for tablet.
Grid method object

GetHover

( )
Returns object with actual cell under mouse as { Row:row, Col:col, X:x, Y:y }.
Row, Col is the actual cell, can be null if there is no cell under mouse.
X, Y is the mouse position inside the cell.
Returns null if the grid is not under mouse.
Grid method object

SetHoverImage

(int value = null, bool always = 0)
Sets HoverImage to the value and updates the view. If value is null, changes it as -1 => -1, 0 => 1, 1 => 0.
If set always, sets the updates the view even if the value is the same as HoverImage.

Highlight cells, rows and columns

Cfg string[][id]

Highlight

GetCfgAttr SetCfgAttr
List of cells to highlight as {hl1:[rowid1,colid1,color1,rowid2,colid2,color2,...], hl2:[rowid1,colid1,color1,rowid2,colid2,color2,...], hl3:...}.
The hlX can be any string or number as highlight id.
The rowidX can be: a) any row or toolbar id, b) null to highlight whole column(s), c) RowPart id to highlight the whole column in this part.
The colidX can be: a) any column or toolbar cell id, b) null to highlight whole row(s), c) ColPart id to highlight the whole row in this part.
The colorX can be any FastGrid color name or html color. It can contain also rgba() for transparent highlight.
The colorX can be null or empty to highlight range of cells / columns like [rowid1_1,colid1_1,,rowid1_2,colid1_2,color1,...] highlights cell range row1,col1:row2,col2 in color. The range must be in one part.
Part bool

Highlight

[1] GetPartAttr SetPartAttr
If the part will be highlighted for whole rows or columns in Highlight.