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

Message

FastGrid documentation

Message

Grid method bool

ShowMessage

(any message, string default = "Message", function func = null, object translate = null)
Shows modal message inside the grid. And disables grid.
The message can be:
a) string as the message text, it equals to { Text:message }
b) object as the Message object, for example { Text:"Are you sure?",Header:"Confirmation",Buttons:["OK"] }
default is default message set to message D attribute.

func(string id,int index,string input) is called after the message is closed.
id is clicked button id, index is clicked button index from left (first = 0), input is entered text.
translate can be an object with attributes to use is in text translation of code in {}, see Text.
Returns true if the message is shown, otherwise returns false.
Grid method bool

ShowMessageLater

(function laterfunc, any[] parameters, any message, string default = "Message", function func = null, object translate = null)
Use to show message inside JavaScript code, the next code in laterfunc is delayed and is run after the message is shown.
To just postpone the laterfunc to run before paint without message use Later method instead.
Shows message by ShowMessage with parameters message, default, func, translate.
Next calls the function laterfunc with parameters parameters in setTimeout. After function finishes, hides message and calls Paint.
The laterfunc is called as a method of the Grid object.
Returns true if the message is shown, otherwise returns false. But the laterfunc is called always.
Grid method void

HideMessage

(bool now = 0)
Hides actual grid message, if any. And enables grid.
If set now, it hides the message immediately without animation.
Grid method void

Disable

(bool opaque = 0)
Disables the grid. If the grid is already disabled does nothing.
Disabled grid is disabled for a user, but still can be changed by API.
If set opaque, does not set the grid semi transparent.
Grid method void

Enable

( )
Enables disabled grid. If the grid is not disabled does nothing.
Grid Message[id]

Messages

[...]
FastGrid root tag with all predefined messages. It contains named array of all the Message objects their names can be used in D when showing message.
Message string

D

[...]
Default message definition used for the message. The default message defines the attributes that the message has not set.
Predefined defaults in Defaults.js:
BaseBase default used for all messages
MessageSimple message displayed forever. Default message used for messages without specified default
TimeMessage displayed for 2 seconds
ShortTimeMessage displayed for 1 second
OkMessage displayed forever with Ok button to close
WarningMessage displayed forever with Ok button to close and orange highlight used for warning
WarningTimeMessage displayed displayed for 2 seconds and orange highlight used for warning
WarningShortTimeMessage displayed displayed for 1 second and orange highlight used for warning
ErrorMessage displayed forever with Ok button to close and red highlight used for error
ErrorTimeMessage displayed displayed for 2 seconds and orange red used for error
ErrorShortTimeMessage displayed displayed for 1 second and orange red used for error
ProgressMessage with progress bar
ProgressCancelMessage with progress bar and Cancel button
PromptSimpleSimple prompt for user input
PromptPrompt for user input with Ok and Cancel buttons
PromptReadOnlyRead only Prompt for user input with only Cancel buttons
PromptLinesMultiline textarea Prompt for user input with Ok and Cancel buttons
ConfirmMessage to confirm or cancel action with Ok and Cancel buttons
ResultMessage used for ResultMessage, it is displayed forever with Ok button to close
ResultErrorMessage used for ResultMessage with ResultError, it is displayed forever with Ok and Cancel buttons.
Message string

Text

Main message text displayed in the middle of the message. It can contain HTML code.
Message string

Header

Message header text displayed on top of the message, if any. It can contain HTML code.
Message any

Progress

If set, the message displays progress bar in its bottom.
It can be object as the Progress object definition with attributes Value as actual progress number and Max as maximal progress number, for example { Value:3, Max:10 }
Or it can be int as shortcut for { Value:Progress, Max:100 }.
If the grid already shows message with Progress attribute, the next call of ShowMessage just updates the progress bar and does not re-create the message.
Message string

Prompt

If set (including empty string), the message displays an <input> in its bottom to enter single line text.
The Prompt string is filled to the <input> on start.
Message int

PromptLines

[0]
If set (either to 1), permits entering multiline string in Prompt.
Specifies number of rows of the textarea.
Enter key in textarea inputs new line and Ctrl+Enter or Alt+Enter finishes editing, except the message has defined Button with Default:1.
Message bool

ReadOnly

If set, the Prompt input / textarea is read only and cannot be changed.
Message int

Time

[0]
If set to not zero number it hides the message after given number of milliseconds.
Message object[]

Buttons

List of buttons shown in the bottom of the message, from left to right.
It can be string as comma separated list of button ids, e.g. "Ok,Cancel" = [ {id:"Ok"}, {id:"Cancel"} ]
It can be array of strings as array of button ids, e.g. ["Ok","Cancel"] = [ {id:"Ok"}, {id:"Cancel"} ]
It can be array of objects as array of Button objects, every Button object can have these attributes:
id - id of the button, passed as the first parameter to the func in ShowMessage when the button is clicked.
Text - button caption. If not set, the id is used. It can be also an identification string to the grid Text, read with "$Button" prefix, e.g. "Ok" is read from Text["$ButtonOk"].
Default - default button, for 1 it is clicked by Enter key, 2 it is clicked by Esc key.
Message int

Animate

[200]
If and how long (in milliseconds) animates the showing and hiding the message.
Message int

AnimateChange

[1]
If and how long (in milliseconds) animates the showing when the grid already showed some message.
Message bits

Translate

[5]
If and how the Message Text, Header and Button.Text will be translated by grid Text.
Can use the same values as cell Translate.
Cfg number

DisabledOpacity

[0.5] GetCfgAttr SetCfgAttr
CSS opacity of the whole grid when grid is disabled.

Message style

Message style attributes can be set in these tags:
Message - in main message object for the whole message and all sections without setting the styles,
BodyStyle - for Text section and text,
HeaderStyle - for Header section and text,
PromptStyle - for Prompt input and its text,
PromptOuterStyle - for Prompt section,
ProgressStyle - for Progress section and bar,
ButtonsStyle - for Buttons section,
ButtonStyle - default style for every button and its text in Buttons section,
Button - in every message button object in Buttons and its text.
MessageStyle string

Color

CSS background-color. It can be CSS color or FastGrid color name.
MessageStyle string

Border

CSS border. It can contain also FastGrid color names and border width names. For example: Border:"2px solid red" or Border:"wgrid solid grid".
Unlike CSS it can contain more values separated by comma for top, right, bottom, left border in this order. For example: Border:",,wgrid solid grid,3px solid red" defines left and bottom border.
MessageStyle string

Shadow

CSS box-shadow. It can contain also FastGrid color names and border width names. For example: Shadow:"0px 0px 0px 3px red" or Shadow:"2px 2px 0px 3px grid".
MessageStyle string

Padding

CSS padding. It can contain up to four values. For example: Padding:"10px 0px 5px 3px"
MessageStyle string

Margin

CSS margin. It can contain up to four values. For example: Margin:"10px 0px 5px 3px"
MessageStyle string

TextColor

CSS color. It can be CSS color or FastGrid color name.
MessageStyle bits / string

TextStyle

CSS settings for font-weight and font-style, bit array. 1. bit &1 Bold, 2. bit &2 Italic.
MessageStyle bits

TextLine

CSS settings for text-decoration, bit array.
1. bit &1 Underline, 2. bit &2 Strike, 3. bit &4 Overline,
4+5+6. bit &56 Line decoration (0 - solid, 8 - double, 16 - dotted, 24 - dashed, 32 - wavy),
7+8. bit &192 Line thickness (0 - 1px, 64 - 2px, 128 - 3px, 192 - 5px).
MessageStyle string

TextLineColor

Color for TextLine. If not set, the line has the same color as the text. It can be CSS color or FastGrid color name.
MessageStyle int / string

TextShadow

CSS settings for text-shadow, bit array.
It contains only reference to TextShadows, there are predefined 0 - 30 number shadows, the 0 is no shadow.
MessageStyle string

TextShadowColor

Color for TextShadow. If not set, the shadow has the same color as the text. It can be CSS color or FastGrid color name.
MessageStyle any

TextSize

CSS font-size. It can be number as value in pixels. The line-height is calculated as TextSize*LineHeightRatio.
Or it can be full CSS font-size / line-height, for example "12px/15px".
MessageStyle string

TextFont

CSS font-family. It can be standard CSS font-family string like '"myfont",Arial,sans-serif'.
MessageStyle string

SelectColor

For PromptStyle only. CSS background-color of selected text in the prompt input / textarea. It can be CSS color or FastGrid color name.
MessageStyle string

SelectTextColor

For PromptStyle only. CSS color of selected text in the prompt input / textarea. It can be CSS color or FastGrid color name.
MessageStyle string

ProgressColor1

["progress"]
For ProgressStyle only. CSS background-color of the progress bar. It can be CSS color or FastGrid color name.
MessageStyle string

ProgressColor2

["rgba(255,255,255,0.2)"]
For ProgressStyle only. CSS background-color of the stripes on the progress bar. It can be CSS color or FastGrid color name.
MessageStyle int

ProgressHeight

[15]
For ProgressStyle only. Height in pixels of the progress bar.
MessageStyle int

ProgressStripe

[50]
For ProgressStyle only. Width of the progress stripes in pixels.
MessageStyle number

ProgressAnimate

[2000]
For ProgressStyle only. Duration of the animation cycle in milliseconds. 0 means no animation.