News in versions: FastGrid 1.0, TreeGrid 17.0
Development References Contacts
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

Cell type and format

FastGrid documentation

Cell type and format

?? Cell, Tool string

Type

["Auto" / "String"] GetAttr SetAttr
Specifies the basic behavior of the cell. How it will be displayed, edited, calculated sorted, filtered and so on.
Cell type can be:
AutoAutomatic type chosen according to cell value and Format. It chooses among Bool (as TRUE / FALSE, not checkbox), Number, Date and String / Html types.
BoolBoolean type with value 0/null/false or 1/true or -1 as unknown or value up to 999. It is displayed as checkbox.
NumberInteger or floating point number. It is formatted by Format.
DateDate and/or time. It can be set as number of millisecond since 1/1/1970 (if set ExcelDates to count of days since 12/31/1899) or date string "M/d/yyyy h:m:s". It is formatted by Format.
StringAny text in string. Cannot contain HTML code. - any HTML code is escaped.
HtmlAny HTML code in string. Using many cells with HTML code can remarkably slow down the rendering!
Default cell Type is "Auto", only in Header and editable Toolbar cells it is "String".
Cell, Tool string

Format

GetAttr SetAttr
Formats the cell value for display and editing. It can be used for Type:
Number - used only for display. For editing is used only percentage, if any.
Date - used for display and edit (if EditFormat is not defined).
Auto - used to distinguish Date from Number and String. Used to format the dates and numbers for display and edit. Can be automatically se according to entered values.
Cell, Tool string

EditFormat

GetAttr SetAttr
Format string to display the Number and for editing. It should not be used for Auto type.
Cfg object[]

Formats

Predefined formats to choose by SetFormat action.
The structure is similar to the menu Items, with added Format attribute. Every item has mainly these attributes:
id - text shown in the Format cell on Text toolbar,
Text - text shown in the menu shown SetFormat action,
Format - FastGrid Format value set to the cells by the SetFormat.
If the list contains item with id="@Custom", this item shows submenu with all used formats in grid except the ones define in Formats.
Actions

SetFormat

(int target = 0, string value = null) OnClickFormat
Sets format on the actual cell or on all focused cells. Changes the Format to value.
Actions

EnterFormat

(int target = 0) OnClickFormat
Permits entering custom format string and sets it on the actual cell or on all focused cells. Changes the Format to value.
Grid method any

GetUsedFormats

(int type = 0)
Returns all Format values in grid except on toolbars. According to the type
0 - returns all formats in object according to the Format value like { format1:1, format2:1, ... } 1 - returns all formats in sorted array.
2 - returns custom formats (all formats not in Formats array) in sorted array.
3 - returns custom formats (all formats not in Formats array) in sorted array for menu Items like [{ id:format1, Format:format1 }, { id:format2, Format:format2 }, ...].
Grid method string

GetFormatId

(string format, bool translate = 0)
Returns format id from Formats by the Format value. If there is no such format in Formats, it returns the format itself or empty string.
If set translate, it translates custom formats (not in Formats) using "$CustomFormat" text.
Grid method string

GetFormatFormat

(string id)
Returns format Format from Formats by the id value. If there is no such id in Formats, it returns the format itself.

Range - more values or value ranges in one cell

Cell, Tool int

Range

GetAttr SetAttr
If the cell contains more value or value ranges. For example "1;3~7;12;16~33" or "1/1/2000~3/3/2000;1/1/2007" or "one;three~six;eight"
The values are separated by ValueSeparator, default is semicolon.
The values in range are separated by RangeSeparator, default is tilde.
It can be used in Number, Date, String and Auto types.
The individual items are set and formatted according to the cell Type, Format and EditFormat.
In String type and Auto type with string just shows the display versions of the separators.
It can be set to: 0 - no range, only single value, 1 - one or more ranges or single values (both separators), 2 - more single values (only ValueSeparator), 3 - one range (only RangeSeparator).
Values 2 and 3 restrict entering the other separator during editing and affect also Calendar dialog and filtering.
Cfg bits

RangeError

GetCfgAttr SetCfgAttr
How the errors in date or number range are displayed and edited, bit array:
1. bit &1 0 - displays the whole range with the error parts replaced by the NaN / NaD.
1 - displays only the NaNRange / NaDRange.
2. bit &2 0 - for editing it displays the range as is.
2 - for editing it displays the range as NaNInput / NaDInput.
Cfg int

AutoRange

[0] GetCfgAttr SetCfgAttr
If set and Type is Auto and value contains valid number or date range, it is formatted and aligned as number / date even if cell has not set Range attribute.
If set to 2 and Type is Auto, it also replaces the value and range separators in strings by their display variants.
Format char

ValueSeparator

[";"]
Separates values or value ranges in Range cell in data and for editing.
Format string

ValueSeparatorDisplay

["; "]
Separates values or value ranges in Range cell for display
Format char

RangeSeparator

["~"]
Separates values in range in Range cell in data and for editing.
Format string

RangeSeparatorDisplay

[" ~ "]
Separates values in range in Range cell for display

String Type

String type is simple type without any formatting. It cannot use HTML code, all HTML code is escaped and shown as the code.
It is default type for header and toolbar cells.

Html Type

Html type can show HTML code in cell. Using many cell of Html type can slow down paint!
The Html type can be edited by rich text editor. It supports Toolbar icons to change text style.
Permitted HTML tags: <span>, <b> / <strong> (font-weight:bold), <i> / <em> (font-style:italic), <u> / <ins> (text-decoration:underline), <s> / <strike> / <del> (text-decoration:line-through), <small> (font-size:10px), <code> (font-family:monospace), <br>, <a>.
Permitted CSS attributes: font-weight, font-style, font-variant, text-decoration, font-size, font-family, color, text-shadow.
Sub and super text can be done by vertical-align:50% /*super = 50%, sub = -50%*/; line-height:50%; optionally with font-size:85%.
After editing all the HTML tags (except <a> and <br>) are converted to <span> tag with appropriate CSS attributes.
!! Cfg bool

AutoHtml

[0] / [1] GetCfgAttr SetCfgAttr
If set, the Auto type cell can contain Html code to format the text like in Html Type.
If not set, the Html in Auto type is escaped like in String type.
Using many cells with HTML code remarkably slows down paint!
!! Cfg bool

HtmlHeight

[0] / [1] GetCfgAttr SetCfgAttr
If set, the Html type cell or Auto type cell with AutoHtml=1 containing html code is used to calculate row height if the row has not set Height attribute.
It is applied also for cells with set TextStyle, TextSize and TextFont.
Setting the attribute remarkably slows down paint if applied by many cells!
!! Cfg bool

HtmlWidth

[0] / [1] GetCfgAttr SetCfgAttr
If set, the Html type cell or Auto type cell with AutoHtml=1 containing html code is used to calculate column width if the column has not set Width attribute.
It is applied also for cells with set TextStyle, TextSize and TextFont.
Setting the attribute remarkably slows down paint if applied by many cells!
! Cfg bool

HtmlEvents

[0] GetCfgAttr SetCfgAttr
If set, HTML code in the Html type cell or Auto type cell with AutoHtml=1 can contain inline event handlers and links.
Setting the attribute can slow mouse hover.