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

How to run FastGrid SalesForce Lightning Web Component (LWC) examples

0) Run and test FastGrid LWC examples (optional)

This paragraph uses Visual Studio Code based on Hello world example desribed at https://www.salesforcetroop.com/lwc/hello-world-using-lwc. For another editor use similar Hello world approach.
To learn how to set up Visual Studio Code for SalesForce LWC see https://www.apexhours.com/how-to-setup-visual-studio-code-for-salesforce/.

0) Open or create your SalesForce SFDX project in VS Code. If you don't have any, folow the above link.

Create LWC project in VS Code


1) In VS Code, open the Command Palette (by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS).

2) Type SFDX and select SFDX: Create Lightning Web Component.

3) Type fastGridLWC as the name of the new component and press Enter. If entered different name, you will need to rename the sample files after copied in point 5).

4) Press Enter again to accept the default force-app/main/default/lwc.


Copy sample files to the project


5) Copy all three files and all subdirectories from the FastGrid source directory /Examples/Special/SalesForce/SampleLWC/ to the /force-app/main/default/lwc/ directory and replace the three existing files here.


Upload static resources to SalesForce Org


6) In VS Code open the Command Palette, type SFDX and select SFDX: Open Default Org.

7) In the SalesForce Org go to Setup by clicking gear icon on the top right toolbar and choosing the Setup item.

8) Type static in the top "Search in setup" and choose Static Resources item from the offered list.

9) In the Static Resources list click to New button above the list and add FastGrid script FGridE.js as static resource:
Add file /Examples/Special/SalesForce/StaticResources/FGridE.js as FastGrid static resource.

10) In the Static Resources list click to New button above the list and add sample FastGrid static resource:
/Examples/Special/SalesForce/StaticResourcesSamples/Excel.xlsx as FastGridExcel static resource.


Deploy the VS Code project to the SalesForce Org


11) In the VS Code fastGridLWC project tree right click to default directory (force-app\main\default) and choose option SFDX: Deploy This Source to Org in the popup menu.

12) Check if the deploying was sucessful and correct the errors if failed.


Create new SalesForce Lightning page with the new component


13) In the SalesForce Org Setup page type builder in the top "Search in setup" and choose Lightning App Builder item from the offered list.

14) In Lightning App Builder pages list click to New button, choose App Page and click Next.

15) Type the page label, e.g. FastGrid Samples and press Enter.

16) Choose the page layout, e.g. One Region and click Done.

17) Drag the created component fastGridLWC from the left menu (from Custom section) to the right page.

18) Click to Save button in the top right corner. In next dialog click to Activate.

19) In the next Activation dialog click to Lightning Experience tab on top and choose the application where to add the page. For example choose Sales on the left and click Add page to app on the right and next choose the page position in the listed tabs.

20) Show the page with the component (e.g. application Sales, tab FastGrid Samples) in SalesForce Org application launcher and see the FastGrid examples.



Using FastGrid in SalesForce Lightning Web Component (LWC) project


1) Upload FastGrid script to Static Resources

Upload FGridE.js to SalesForce Static Resources. The resource name can be chosen freely, FastGrid examples use "FastGrid" name.

2) Import FastGrid script in the LWC project

Import the FastGrid script from static resources, e.g.: import FG from '@salesforce/resourceUrl/FastGrid';
Load FastGrid script to the project, e.g.: await loadScript(this, FG); usually in the connectedCallback() definition (it must be set with async).
The loadScript function can be imported as import { loadScript } from 'lightning/platformResourceLoader';.

3) Place FastGrid main tag and dialogs tag to html

Place FastGrid dialogs tag to html. This tag will be used as parent for all FastGrid dialogs and support tags. It should be positioned absolute and have lwc:dom="manual".
Add class attribute to refer the tag by it in code. And assign the tag in code to FGrid.DialogsTag. And set also FGrid.DialogsFixed = 1 because of the absolute dialogs tag. For example:
<div class="FGDialogs" style="position:absolute;left:0px;top:0px;" lwc:dom="manual"></div>
FGrid.DialogsTag = this.template.querySelector(".FGDialogs"); FGrid.DialogsFixed = 1;

Assign querySelector function to FastGrid as: FGrid.QuerySelector = this.template.querySelector.bind(this.template);

Place FastGrid main div tag to html. To this tag FastGrid will be rendered to by FastGrid() function. It should have lwc:dom="manual".
Add class attribute to refer the tag by it in code. For example:
<div class="FGSpans" style="height:600px;overflow:hidden;" lwc:dom="manual"></div>

4) Import or load FastGrid layout and data

Import static json files, used usually for layout, e.g. in the samples: import SpansDef from './Samples/SpansDef.js';.
Load FastGrid data from database or import them if also static, e.g. in the samples: import SpansData from './Samples/SpansData.js';

5) Create FastGrid from the layout and data

Create FastGrid from the loaded data and imported layout by FastGrid() function. For example FGrid.FastGrid([SpansDef,SpansData],this.template.querySelector(".FGSpans"));
Note, Cfg MaximizeHeight is not supported by LWC and should be always 0.