Changes log (txt file) Compare FastGrid 1.0 & TreeGrid 17.1
Angular Ember Express React Svelte Vue Other frameworks NodeJS server SalesForce LWC
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
Parts - ColParts and RowParts Part size Part scroll position Sets Column sets Row sets
Toolbar Cells Icon Height Width Toolbar position Dragging and manipulating cells Special toolbars
Row / column id Row / column index Row / column name
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 tree Column tree Expand & collapse
Read and write any values by API Cell value Cell attributes Cell value & attributes in UTF8 Store
Editing During editing Validation and errors
Row cell side icons Icons definition Mark icons and charts Mark icons list Row cell floating images
Row height Column width Resizing rows and columns Padding Margin Cell span
Grid style and look Cell style permissions Cell style Cell outer border Cell inner border Alternate row & column background
Cell hyperlink Cell tooltip Static cells Other cell attributes Row & column attributes to speed up
Bool type Check side icon Bool type & Check side icon
JavaScript formulas Aggregate functions String aggregate functions Other functions
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
Dialog Dialog Place Dialog API Menu definition in Script Cell menu List Suggest
Sorting Sorting settings Comparing strings
Grouping Grouping settings Comparing strings Pivot grid
Filtering Filter settings Comparing strings
Search in cells Import files to gridExport files Export and copy to clipboard CSV data
Copy & paste Copy to clipboard Paste from clipboard
Grid size Grid scrollbars Paging and view Media rules - responsive design
Saving settings in storage or cookiesFocus cell and cell ranges Mouse hover cells Highlight cells, rows and columns
Mouse events Key events API events
API for iterating rows and columns Paint and repaint Various API methods
Basic description Main advantages Basic usage License Download Documentation
Bits - small integers or enums Integers or enums with strings Date and time Floating point numbers Special strings
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
chars signed decimals multiple limits varstrings escape base chars2 signed2 decimals2 multiple2 limits2
Internal coding Profiling times for ucode options Function referenceFastGrid documentation
Every item (row, column, cell, toolbar and toolbar cell) can have D attribute to specify default item.Header | Row, Col | D: Header, Index | Column / row captions |
Panel | Row, Col | D: Panel | Panel with buttons |
Filter | Row, Col | D: Filter | Controls filtering rows / columns |
Sticky | Row | D: Sticky | Sticky row like CSS position: sticky |
Group | Toolbar | D: Group | Controls grouping rows / columns |
Hide | Toolbar | D: Hide | Controls showing / hiding columns / rows |
Base | Base default inherited by all default rows without explicitly set the D attribute. Except to Base DefRow itself. |
Row | Default row assigned to every Row without explicitly set the Kind attribute and to Kind = "Row" rows. |
Special | Default row inherited by the special defaults "Header", "Index", "Panel" and "Filter". |
ReadOnly | Default row inherited by the special read only defaults "Header", "Index", "Panel". |
Header | Default row assigned to every Header row (Kind = "Header", Index = 2). |
HeaderFocus | Default row that inherits "Header" and attaches events for focusing whole columns instead of sorting and dragging. |
Index | Default row assigned to every Index row (Kind = "Header", Index = 1). Inherits "Header" default. |
IndexFocus | Default row that inherits "Index" and attaches events for focusing whole columns instead of sorting and dragging. |
Panel | Default row assigned to every Panel row (Kind = "Panel"). |
Filter | Default row assigned to every Filter row (Kind = "Filter"). |
Sticky | Default row assigned to sticky row. |
Group | Default row assigned to every group row created by grouping. |
Base | Base default inherited by all default rows without explicitly set the D attribute. Except to Base DefCol itself. |
Col | Default column assigned to every Col without explicitly set the Kind attribute and to Kind = "Col" rows. |
Special | Default column inherited by the special defaults "Header", "Index", "Panel" and "Filter". |
ReadOnly | Default column inherited by the special read only defaults "Header", "Index", "Panel". |
Header | Default column assigned to every Header column (Kind = "Header"). |
HeaderFocus | Default column that inherits "Header" and attaches events for focusing whole rows instead of sorting and dragging. |
Index | Default column assigned to every Index column (Kind = "Index"). Inherits "Header" default. |
IndexFocus | Default column that inherits "Index" and attaches events for focusing whole rows instead of sorting and dragging. |
Panel | Default column assigned to every Panel column (Kind = "Panel"). |
Filter | Default column assigned to every Filter column (Kind = "Filter"). |
Group | Default column assigned to every group column created by grouping. |
Empty | Default column that can be assigned to empty column to fill the rest space of the part. |
Base | Base default inherited by all default cells without explicitly set the D attribute. Except the Base DefCell itself. It is not applied to cells without DefCell set, if not defined DefCell Cell! |
Cell | Default cell, assigned to all cells without assigned DefCell. It is not defined by default! Defining it will slightly slow down the grid! |
Base default toolbars assigned automatically | |
Base | Base default inherited by all default toolbars without explicitly set the D attribute. Except to Base DefToolbar itself. |
Toolbar | Default toolbar assigned to every Toolbar without explicitly set the D attribute. |
Toolbars to drop columns or rows | |
Group | Toolbar with empty space as the last cell to drop columns or rows for grouping. It is possible to add Cells like GroupList and / or Group to show actual grouping. |
Hide | Toolbar with empty space as the last cell to drop columns or rows to hide them. |
PivotRows | Toolbar with empty space as the last cell to drop columns to add them to PivotRows. |
PivotCols | Toolbar with empty space as the last cell to drop columns to add them to PivotCols. |
PivotData | Toolbar with empty space as the last cell to drop columns to add them to PivotData. |
Toolbars with icons | |
Data1 | Toolbar showing base data cells: Import, Save, Reload, Print, Pdf, PrintPdf, Export, Copy, Paste, Undo, Redo. |
Data2 | Toolbar showing cells for row and column manipulation: Add, Delete, Hide, Select, Collapse, Indent, Span, Split, Fix |
Data3 | Toolbar showing the rest of data icons: AddImage, AddLink, AddTip, AddName, Names |
Text1 | Toolbar showing the text style icons: Bold, Italic, Underline, Strike, TextFont, TextSize, IncTextSize, ClearTextSize, DecTextSize, UpperCase, LowerCase |
Text2 | Toolbar showing the cell style and format icons: Format, AlignLeft, AlignCenter, AlignRight, AlignTop, AlignMiddle, AlignBottom, IndentLeft, IndentRight, WrapText, Rotate |
Text3 | Toolbar showing the rest of text icons: TextColor, TextShadow, TextLine, Color, Border, ClearStyle, ClearValue, NoEdit |
Settings | Toolbar showing settings cells: FilterAction, ClearSort, Lock, Settings. |
Layout | Toolbar showing layout cells: Layout, UpdateToolbars. This toolbar cannot be hidden when updating toolbars. |
Other toolbars | |
Sheets | Toolbar showing all sheets in actual book. |
Cookies | Toolbar showing cells to show and manipulate saved configurations. |
Edit | Toolbar showing Focus and ExternalEdit text boxes like in Excel edit line. |
Search | Toolbar showing SearchText text box and Search icon to provide search in grid. |
Version | Toolbar showing FastGrid version. It must have id="Version" and no Cells defined. Or defined just as string "Version". |
Base default cells assigned automatically | |
Base | Base default inherited by all default toolbar cells without explicitly set the D attribute. Except to Base DefTool itself. |
Cell | Default toolbar cell assigned to all cells with Type set to anything except empty string. Without any special setting. |
Icon | Default toolbar cell assigned to all cells with Type not set. Shows icon according to the cell id, it it has not set Icon. |
Button | Default toolbar cell assigned to buttons in FastGrid dialogs. Shows cell border as button. |
Custom cells | |
Switch | Shows Bool type without the icon. Highlights the text when on. Set Text attribute to display the text and OnChange to catch the change. |
Cells for editing, with CellBorder | |
List | Shows popup list in List. Textbox with cell border around text. Uses String type. |
ListSmall | Like List, but with wide and high cell border. |
ListFirst | Like List, with padding to use as the first cell from adjacent edits. |
ListNext | Like List, with padding to use as the middle cell from adjacent edits. |
ListLast | Like List, with padding to use as the last cell from adjacent edits. |
ListSingle | Like List, with padding to use as single cell in the same spaces as adjacent edits. |
Edit | Shows editable textbox. Textbox with cell border around text. Uses String type. |
EditSmall | Like Edit, but with wide and high cell border. |
EditFirst | Like Edit, with padding to use as the first cell from adjacent edits. |
EditNext | Like Edit, with padding to use as the middle cell from adjacent edits. |
EditLast | Like Edit, with padding to use as the last cell from adjacent edits. |
EditSingle | Like Edit, with padding to use as single cell in the same spaces as adjacent edits. |
EditList | Default toolbar cell showing editable textbox with popup list in List. Textbox with cell border around text. Uses String type. |
Empty cells | |
Space | Shows inactive empty space of fixed width. |
Empty | Shows inactive empty space of relative width to fill the rest of part width. |
Label | Shows inactive text of type String. |
MenuCaption | Shows inactive text of type String used for menu captions. |
Separator | Shows vertical line as separator between toolbars or tools. The line as high as the toolbar. |
Layout | |
UpdateToolbars | Icon to switch DraggingToolbars on and off to permit / restrict users dragging and hiding toolbars. |
Layout | Icon to show layout menu to choose the rows and columns visibility. |
DragHide | Default cell as column / row actually hidden. |
DropHide | Drop area for dropping columns / rows to hide them. |
Sorting, grouping & filtering | |
Sort | Icon with popup to clear actual sorting or to show sorting options. |
ClearSort | Icon to clear actual sorting. |
Group | Icon with popup to switch the grouping on / off or to show grouping options. |
GroupList | Shows popup list from List with predefined group choices. |
DragGroup | Default cell as column / row actually used for group by. |
DropGroup | Drop area for dropping columns / rows to group by them. |
Filter | Icon with popup to switch the FilterAction and / or / off or to show filter options. |
FilterAction | Icon to switch the FilterAction and / or / off. |
FilterTree | Combo box with popup list to choose FilterTree. |
Copy & paste and search | |
Copy | Icon with popup to copy selected cells to clipboard or to show list with copy to clipboard options. |
CopyOnly | Icon to copy selected cells to clipboard. |
Paste | Icon with popup to paste cells or rows from clipboard or to show list with paste from clipboard options. On some systems pasting can be done only by Ctrl+V or from browser menu |
PasteOnly | Icon to paste cells or rows from clipboard. On some systems pasting can be done only by Ctrl+V or from browser menu |
Search | Icon with popup to run search in grid or to show list with search options. |
SearchText | Textbox to enter text to search in grid. |
Base data controls | |
Import | Icon to import local xlsx or json file to grid. |
Save | Icon to send changes or whole data from grid server. |
Reload | Icon to reload data from server and discard all changes. |
Icon to print the grid data to printer. | |
Icon to export data to pdf. Requires server side code to print grid to html and convert it to pdf. | |
PrintPdf | Icon to print data to printer or to export to pdf. PDF export requires server side code to print grid to html and convert it to pdf. |
Export | Icon to export the grid data to xlsx, csv or html. |
Undo | Icon to undo the last action done in grid. |
Redo | Icon to redo the last undone action done in grid. |
Data manipulation - both rows and columns | |
Select | Icon to show popup menu to choose action to select row(s) or column(s). |
Delete | Icon to show popup menu to choose action to delete or undelete row(s) or column(s). |
Hide | Icon to show popup menu to choose action to hide or show row(s) or column(s). |
Add | Icon to show popup menu to choose action to add new or copy existing row(s) or column(s). |
Indent | Icon to show popup menu to choose action to indent or outdent row(s) or column(s). |
Collapse | Icon to show popup menu to choose action to collapse or expand row(s) or column(s). |
Data manipulation - rows | |
SelectRows | Icon to select or unselect all rows. |
DeleteRows | Icon to delete or undelete selected or focused row(s). |
HideRows | Icon to hide selected or focused row(s). |
AddRows | Icon to add new row(s) above focused row. |
CopyRows | Icon to copy selected or focused row(s) above focused row. |
AddRowEnd | Icon to add new row to the end of the default row part. |
IndentRows | Icon to indent selected or focused row(s). |
OutdentRows | Icon to outdent selected or focused row(s). |
ExpandRows | Icon to expand all row(s). |
CollapseRows | Icon to collapse all row(s). |
Data manipulation - columns | |
SelectCols | Icon to select or unselect all columns. |
DeleteCols | Icon to delete or undelete selected or focused column(s). |
HideCols | Icon to hide selected or focused column(s). |
AddCols | Icon to add new column(s) left to the focused column. |
CopyCols | Icon to copy selected or focused column(s) left to the focused column. |
AddColEnd | Icon to add new column to the end of default column part. |
IndentCols | Icon to indent selected or focused column(s). |
OutdentCols | Icon to outdent selected or focused column(s). |
ExpandCol | Icon to expand all column(s). |
CollapseCols | Icon to collapse all column(s). |
Text controls | |
Bold | Icon to switch bold text on / off actually focused cell(s) or edited text. |
Italic | Icon to switch italic style on / off actually focused cell(s) or edited text. |
Underline | Icon to switch text underling on / off actually focused cell(s) or edited text. |
Strike | Icon to switch text strike on / off actually focused cell(s) or edited text. |
TextFont | Combo box with popup list to choose font family of actually focused cell(s) or edited text. |
TextSize | Combo box with popup list to choose font size of actually focused cell(s) or edited text. |
IncTextSize | Icon to increase text size of actually focused cell(s) or edited text. |
DecTextSize | Icon to decrease text size of actually focused cell(s) or edited text. |
ClearTextSize | Icon to set default text size of actually focused cell(s) or edited text. |
UpperCase | Icon to convert to upper case the actually focused cell(s) or edited text. |
LowerCase | Icon to convert to lower case the actually focused cell(s) or edited text. |
Format | Combo box with popup list to choose number or date format in actually focused Auto cell(s). |
AlignLeft | Icon to align left the text in actually focused cell(s). |
AlignCenter | Icon to center the text in actually focused cell(s). |
AlignRight | Icon to align right the text in actually focused cell(s). |
AlignTop | Icon to align top the text in actually focused cell(s) or make the edited text super. |
AlignMiddle | Icon to vertically center the text in actually focused cell(s) or make the edited text normal (clear super / sub). |
AlignBottom | Icon to align bottom the text in actually focused cell(s) or make the edited text sub. |
IndentLeft | Icon to decrease indent in actually focused cell(s). |
IndentRight | Icon to increase indent in actually focused cell(s). |
Wrap | Icon to switch wrapping text on / off in actually focused cells(s). |
Rotate | Icon to set or choose text rotation in actually focused cell(s). Not applicable for toolbar cells. |
TextColor | Icon to set or choose text color of actually focused cell(s) or edited text. |
TextShadow | Icon to set or choose text shadow style and color of actually focused cell(s) or edited text. |
TextLine | Icon to set or choose text line (underline / strike / overline), its style, width and color in actually focused cell(s) or edited text. |
Color | Icon to set or choose cell background color, pattern or gradient in actually focused cell(s). |
Border | Icon to set or choose border color, style and width of actually focused cell(s). Not applicable for toolbar cells. |
ClearStyle | Icon to clear all style settings in actually focused cell(s) or in edited text. |
ClearValue | Icon to clear all values in actually focused cell(s) or in edited text. |
NoEdit | Icon to choose editing permissions in actually focused cell(s). |
Other icons | |
AddImage | Icon to show system dialog to choose local image file to add to grid into Images for focused cell. On tablets it is replaced by Image tool by Media. |
Image | Icon to show menu with options to choose image actions and to show system dialog to choose local image file to add to grid into Images for focused cell. |
AddLink | Icon to show prompt to enter link in focused cell(s) or edited text. |
Span | Icon to span together focused range of cells. |
Split | Icon to split spanned focused cell(s). |
Fix | Icon to move all rows above focused row to above part and all columns left to the focused column to left part. |
AddTip | Icon to show prompt to enter tip for focused cell(s). |
AddName | Icon to show prompt to enter name containing focused cell or cells range. To be used in editable formulas. |
Names | Icon to show dialog with all defined names in grid to manipulate them. |
Lock | Icon to show list of acual and available locks in grid to change them. |
Layout | Icon to show dialog with rows, columns, toolbars and scrollbars to hide or show them. |
Settings | Icon to show dialog with FastGrid configuration settings. |
Cookies | |
Cookies | List box with available saved configurations of the grid. |
LoadCookie | Icon to load configuration selected in Cookies. |
SaveCookie | Icon to save actual configuration to under name selected in Cookies. |
DeleteCookie | Icon to delete configuration selected in Cookies. |
AddCookie | Icon to show prompt to enter name for new configuration to save, to add it to Cookies. |
Pivot | |
PivotList | Shows popup list from List with predefined pivot choices. |
Pivot | Icon with popup to switch the pivot on / off or to show pivot options. |
DragPivot | Default cell as column / row actually used for pivot (PivotRows, PivotCols, PivotData). |
DragSource | Default cell as column / row actually used as available source to drag to pivot. |
DropPivotRows | Drop area for dropping columns / rows to create pivot grid from them. |
DropPivotCols | Drop area for dropping columns / rows to create pivot grid from them. |
DropPivotData | Drop area for dropping columns / rows to create pivot grid from them. |
PivotLabel | Inactive text label for pivot toolbars. |
Sheets | |
Sheet | One sheet in sheet list on Sheets toolbar. |
SheetActive | Highlighted sheet (shown in actual grid) in sheet list on Sheets toolbar. |
Sheets | Icon to show menu with all sheets in actual book. |
AddSheet | Icon to add new empty sheet. |
Special cells | |
Focus | Special combo cell showing actually focused cell or cell range in grid. Editable to change the focus. |
ExternalEdit | Special combo cell showing value of actually focused cell in grid. Editable to change the value. |
DragToolbar | Special icon cell that is shown as the first cell in every toolbar when DraggingToolbars is on. |