FastGrid

https://www.treegrid.com/FDoc/
Admin
FastGrid is a next-generation high-performance JavaScript tree grid component for web applications,...
Tokens:493,280
Snippets:4,063
Trust Score:8
Update:1 month ago
Show doc for...
Tokens:
Raw
### Generate example project with create-fastgrid-react

Source: https://www.treegrid.com/FDoc/FastGridReact.html

Generates a complete example React project with quick-starts, tutorials, server examples, SQL database, PDF export, TypeScript examples, and complex demos.

```bash
npm create fastgrid-react@latest my-fastgrid-app
```

--------------------------------

### Install fastgrid-vue and render FastGrid component

Source: https://www.treegrid.com/FDoc/FastGridVue.html

Install the fastgrid-vue library in an existing Vue application, then import the FastGrid component and render it with a minimal data source. The component expects a src object with Cols, Head, and Body properties; the example sets a fixed height of 500px. For SSR setups like Nuxt, keep the grid in a client-only component or initialize after the browser mounts.

```bash
npm install fastgrid-vue@latest
```

```html
<script setup>
import { FastGrid } from "fastgrid-vue";

const src = {
  Cols: ["Name", "Value"],
  Head: [{ D:"Header", V: { Name: "Name", Value: "Value" } }],
  Body: [
    { V: { Name: "Alice", Value: 120 } },
    { V: { Name: "Bob", Value: 85 } }
  ]
};
</script>

<template>
  <FastGrid :src="src" style="height:500px;" />
</template>
```

--------------------------------

### Generate a complete FastGrid example project with create-fastgrid-vue

Source: https://www.treegrid.com/FDoc/FastGridVue.html

Use the create-fastgrid-vue project generator to scaffold a ready-to-run example Vue project. This command creates a new project directory named my-fastgrid-app with examples, server examples, SQL database, PDF export, TypeScript examples, and complex demos. The generator package is optional and not required in an existing application.

```bash
npm create fastgrid-vue@latest my-fastgrid-app
```

--------------------------------

### Generate a FastGrid example project with create-fastgrid-svelte

Source: https://www.treegrid.com/FDoc/FastGridSvelte.html

Generate a complete example Svelte project using the create-fastgrid-svelte generator. Use this for quick-starts, tutorials, server examples, SQL database, PDF export, TypeScript examples, and complex demos.

```bash
npm create fastgrid-svelte@latest my-fastgrid-app
```

--------------------------------

### Install fastgrid-react

Source: https://www.treegrid.com/FDoc/FastGridReact.html

Installs the FastGrid React library in an existing React application.

```bash
npm install fastgrid-react@latest
```

--------------------------------

### Install latest fastgrid-vue for existing app

Source: https://www.treegrid.com/FDoc/FastGridVue.html

Use this command to install the latest version for an existing application.

```bash
npm install fastgrid-vue@latest
```

--------------------------------

### Install fastgrid-svelte with npm

Source: https://www.treegrid.com/FDoc/FastGridSvelte.html

Install the FastGrid Svelte library into your Svelte project. Use this command in your project directory.

```bash
npm install fastgrid-svelte@latest
```

--------------------------------

### Example full menu grid with List and ListMenu

Source: https://www.treegrid.com/FDoc/Menu.htm

Example of a full menu grid with List and ListMenu attributes. The default menu default (D attribute) for List is "List".

```text
{ id:"E", RightIcons:"List", Button:"List",
List:{a:{Value:'A',Text:'AA'},b:{Value:'B-red',Text:'BB',TextColor:'red'},c:{Value:'C',Text:'CC'}},   
ListMenu:[{id:'a',Value:'AA'},{id:'b',Value:'BB',TextColor:'blue'},{id:'c',Value:'CC'}]   
}
```

--------------------------------

### FastGrid Svelte TypeScript example with API events

Source: https://www.treegrid.com/FDoc/FastGridSvelte.html

Complete Svelte application using FastGrid with TypeScript. Demonstrates grid reference binding, API methods Get and Set, and event handlers onSetValue, onClick, and onReady. Event names start lowercase and are translated to FastGrid API event names starting uppercase.

```svelte
<script lang="ts">
  import { FastGrid } from "fastgrid-svelte";
  const src = { Cols:["A","B",{id:"C",Width:80}], Head:["Header"], Body:[ { V:[1,2,3] }, { V:{A:4,B:5,C:6} } ] };
  let grid:FastGrid|null = null;
  function readValue() : void { alert("Read value from cell [1,A]: "+ grid?.Get(1,"A")); }
  function changeValue(grid:TGrid|null,row:TRow|string|number,col:TCol|string|number,val:any) : void {
    grid?.Set(row,col,"",val,1);
  }
  const onSetValue : TFGrid["OnSetValue"] = (_grid,row,col,value,changes) => {
    if(changes) console.log("Value "+value+" set to cell ["+row?.id+","+col?.id+"]");
  }
  function onClick(grid?:TGrid,row?:TRow,col?:TCol) : void|boolean|number {
    if(row&&col) console.log("clicked cell ["+row.id+","+col.id+"] with value "+grid?.GetValue(row,col));
  }
  function onReady(grid:TGrid) : void { console.log("FastGrid is ready"); }
</script>
<FastGrid id="Simple_grid" bind:this={grid} {src} {onSetValue} {onClick} {onReady} style="height: 500px;"/>
<button onclick={readValue}>Read value</button>
<button onclick={() => changeValue(grid, 1, 'A', 'XXX')}>Change value</button>
```

--------------------------------

### Install fastgrid-svelte and render a minimal FastGrid component

Source: https://www.treegrid.com/FDoc/FastGridSvelte.html

Install the fastgrid-svelte library in an existing Svelte application, then import the FastGrid component and render it with a minimal data source. The grid renders in the browser; with SvelteKit SSR, keep it in a browser-only component or initialize after mount.

```bash
npm install fastgrid-svelte@latest
```

```svelte
<script>
    import { FastGrid } from "fastgrid-svelte";
    const src = {
       Cols: ["Name", "Value"],
       Head: [{ D:"Header", V: { Name: "Name", Value: "Value" } }],
       Body: [
          { V: { Name: "Alice", Value: 120 } },
          { V: { Name: "Bob", Value: 85 } }
       ]
    };
</script>

<FastGrid {src} style="height:500px;" />
```

--------------------------------

### Use AIAddColsAttrs to get column attributes

Source: https://www.treegrid.com/FDoc/AI.htm

Example usage of the AIAddColsAttrs grid method. It creates a string S that describes the grid columns as a JSON object by calling AIAddColsAttrs() and stringifying the result.

```javascript
var S = "The grid columns are defined in JSON object as: "+JSON.stringify(this.AIAddColsAttrs())+". ";
```

--------------------------------

### FilterWhiteChars

Source: https://www.treegrid.com/FDoc/Filter.htm

List of characters to ignore when comparing strings for filter. Used only if the row, column, cell has not set the WhiteChars attribute. It can be set for example to " " (space) to ignore spaces (it means that for example "a b c" and "abc" strings are the same. If starts by "-", it is ignored, but can be turned on in FilterMenu.

```APIDOC
## FilterWhiteChars

### Description
List of characters to ignore when comparing strings for filter. Used only if the row, column, cell has not set the WhiteChars attribute. It can be set for example to " " (space) to ignore spaces (it means that for example "a b c" and "abc" strings are the same. If starts by "-", it is ignored, but can be turned on in FilterMenu.

### Method
GetCfgAttr / SetCfgAttr

### Parameters
#### Attribute
- **FilterWhiteChars** (string) - Required - List of characters to ignore.
```

--------------------------------

### OnStartedEdit

Source: https://www.treegrid.com/FDoc/CellEdit.htm

Called after editing of the cell **row** , **col** started and the input / textarea is created and shown. Here is possible to call GetEdit to get edit input / textarea and assign own event handlers for custom editing.

```APIDOC
## OnStartedEdit

### Description
Called after editing of the cell **row** , **col** started and the input / textarea is created and shown. Here is possible to call GetEdit to get edit input / textarea and assign own event handlers for custom editing.

### Method
API event

### Parameters
- **grid** (_Grid_) - Required - Grid object.
- **row** (_Row_) - Required - Row object.
- **col** (_Col_) - Required - Column object.

```

--------------------------------

### Full React App with FastGrid JavaScript

Source: https://www.treegrid.com/FDoc/FastGridReact.html

A minimal React component that defines a grid source with useMemo, attaches a ref, and uses click handlers and API methods Get, Set, and GetValue. The grid is configured with a fixed height and shows an example of styling and event handling.

```jsx
import React, { useMemo, useRef } from "react";
import { FastGrid } from "fastgrid-react";
_// Required to use FastGrid library_
export default function App() {
   const src = useMemo(() => ({ Cols:["A","B",{id:"C",Width:80}], Head:["Header"], Body:[ { V:[1,2,3] }, { V:{A:4,B:5,C:6} } ] }), []);
_// Full layout and data of very simple grid. Memo is used for simple object created inside the App function to avoid re-creating grid on every React App render._
    const gridRef = useRef(null);
_// FastGrid reference assigned in <FastGrid ref .../> and used in functions like readValue_
    function readValue() {
      alert("Read value from cell [1,A]: "+ gridRef.current?.Get(1,"A"));
    }
_// Function called from Read value sample button_
    function changeValue(row,col,val) {
      gridRef.current?.Set(row,col,"",val,1);
    }
_// Function called from change value sample button_
    function onChange(grid,row,col,value,changes){ if(changes) console.log("Value "+value+" set to cell ["+row.id+","+col.id+"]"); }
_// FastGrid OnSetValue API event handler assigned to <FastGrid onSetValue .../>_
    function onClick(grid,row,col){ if(row&&col) console.log("clicked cell ["+row.id+","+col.id+"] with value "+grid.GetValue(row,col)); }
_// FastGrid OnClick API event handler assigned to <FastGrid onClick .../>_
    function onReady(grid){ console.log("FastGrid "+grid.id+" is ready"); }
_// FastGrid OnReady API event handler assigned to <FastGrid onReady ... />_
    return(<>
       _{/* Places the grid with data in src to page.
The grid has set fixed height, so it can show vertical scrollbars.
There are assigned three FastGrid API event handlers onSetValue,
onReady and onClick. The event names start with a lowercase letter
and are translated to FastGrid API event names starting uppercase */}
       <FastGrid src={src} ref={gridRef} id={"Book1"}
       onSetValue={onChange}
       onReady={onReady}
       onClick={onClick}
       style={{height:"500px"}}
       />
      <button onClick={readValue}>Read value [1,A]</button>
_// Button to run universal API function
with parameters in grid.
      <button onClick={() => { changeValue(1,"A","XXX"); }}>Change
value [1,A]</button>
       </>)
}
```

--------------------------------

### Render FastGrid with sample data

Source: https://www.treegrid.com/FDoc/FastGridReact.html

Shortest working example: imports FastGrid and renders it with a data source. Use in a client-side React environment; for SSR frameworks initialize on the client.

```jsx
import { useMemo } from "react";
import { FastGrid } from "fastgrid-react";

export default function App() {
  const src = useMemo(() => ({
    Cols: ["Name", "Value"],
    Head: [{ D:"Header", V: { Name: "Name", Value: "Value" } }],
    Body: [
      { V: { Name: "Alice", Value: 120 } },
      { V: { Name: "Bob", Value: 85 } }
    ]
  }), []);

  return (
    <FastGrid src={src} style={{ height: "500px" }} />
  );
}
```

--------------------------------

### Generate a FastGrid project

Source: https://www.treegrid.com/FDoc/FastGridReact.html

Use create-fastgrid-react to generate a new project.

```bash
npm create fastgrid-react@latest
```

--------------------------------

### FastGrid React TypeScript example with API events and methods

Source: https://www.treegrid.com/FDoc/FastGridReact.html

Full React application using FastGrid with TypeScript definitions. It creates a grid with layout and data, assigns API event handlers (onSetValue, onReady, onClick), and uses gridRef to call Get and Set methods. The grid has a fixed height of 500px and two buttons to read and change cell values.

```tsx
import React, { useMemo, useRef } from "react"; import { FastGrid } from "fastgrid-react"; // Required to use FastGrid library export default function App() {    const src = useMemo(() => ({ Cols:["A","B",{id:"C",Width:80}], Head:["Header"], Body:[ { V:[1,2,3] }, { V:{A:4,B:5,C:6} } ] }), []); // Full layout and data of very simple grid. Memo is used for simple object created inside the App function to avoid re-creating grid on every React App render.    const gridRef = useRef<TGrid|null>(null); // Grid reference received for grid, access the grid object as gridRef.current, the gridRef is of type TGridRef    function readValue() : void { alert("Read value from cell [1,A]: "+ gridRef.current?.Get(1,"A")); }     // Function called from Read value sample button    function changeValue(gridRef:TGridRef,row:TRow|string|number,col:TCol|string|number,val:any) : void {  // Function called from Change value sample button       gridRef.current?.Set(row,col,"",val,1);        }                    const onSetValue : TFGrid["OnSetValue"] = (_grid,row,col,value,changes) => { // FastGrid OnSetValue API event handler assigned to <FastGrid onSetValue .../>. Uses TFGrid definition to simplify types.       if(changes) console.log("Value "+value+" set to cell ["+row?.id+","+col?.id+"]");        }     function onClick(grid?:TGrid,row?:TRow,col?:TCol) : void|boolean|number { // FastGrid OnClick API event handler assigned to <FastGrid onClick .../>. Uses standard function definition.       if(row&&col) console.log("clicked cell ["+row.id+","+col.id+"] with value "+grid?.GetValue(row,col));        }     function onReady(grid:TGrid) : void { console.log("FastGrid is ready"); } // FastGrid OnReady API event handler assigned to <FastGrid onReady .../>. Uses standard function definition.    return(<>       {/* Places the grid with data in srcLayout and srcData to page. The grid has set fixed height, so it can show vertical scrollbars. See FastGrid size. */} {/* There are assigned three FastGrid API event handlers onSetValue, onReady and onClick. The event names start with a lowercase letter and are translated to FastGrid API event names starting uppercase */}       <FastGrid src={src} ref={gridRef} id={"Book1"} onSetValue={onSetValue} onReady={onReady} onClick={onClick} style={{height:"500px"}} />       <button onClick={readValue}>Read value [1,A]</button> {/* Button to run universal API function with parameters in grid.  */}       <button onClick={() => { changeValue(gridRef,1,"A","XXX"); } }>Change value [1,A]</button> {/* Button to run universal API function with parameters in grid. */}       </>)    }
```

--------------------------------

### Full FastGrid API example with events and buttons

Source: https://www.treegrid.com/FDoc/FastGridHtml.html

Complete HTML example that links the FastGrid library, defines API event handlers (OnSetValue, OnClick, OnReady), creates a grid with layout and events, and adds buttons to read and change cell values. The grid is placed with id 'Simple_Grid' and fixed height for scrollbars. The buttons call dedicated and universal API functions.

```html
<script src="https://www.treegrid.com/FGrid/FGridE.js"></script> _<!-- Links FastGrid library from treegrid.com, for real application download and place FGridE.js locally -->_ <script>    function readValue() { alert("Read value from cell [1,A]: "+ FGrid.Grids.Simple_Grid.Get(1,"A")); }  _// Function called from Read Value button _    function changeValue(grid,row,col,val) { grid.Set(row,col,"",val,1); }                _// Function called from both Change Value buttons with different parameters_    function onSetValue(grid,row,col,value,changes){ if(changes) console.log("Value "+value+" set to ["+row.id+","+col.id+"]"); } _// FastGrid API event OnSetValue handler_    function onClick(grid,row,col){ if(row&&col) console.log("clicked cell ["+row.id+","+col.id+"] with value "+grid.GetValue(row,col)); } _// FastGrid API event OnClick handler_    function onReady(grid){ console.log("FastGrid is ready"); } _// FastGrid API event OnReady handler_    FGrid.Sources.Layout1 = { _// All layout and data for grid. _       Cols: ["A", "B", { id: "C", Width:80 } ], _// Simple columns definition_       Head: [ "Header" ],                       _// Adds header to grid to top, without defining captions, so column ids are shown_       Body: [ { V:[100,200,300] }, { V:{A:400,B:500,C:600} }, { V:"|700|800|900" } ], _// Simple data for 3 rows and 3 columns. shows 3 ways of passing values to grid_       };    FGrid.Sources.Events1 = { Events: { OnSetValue: onSetValue, OnReady: onReady, OnClick: onClick  } }; _// Events assignment, the Events can be also merged with the Layout if needed, see onSetValue, onReady and onClick. _ </script> _<!-- Places the grid with data in Layout1 and Events1 to page. The grid has set fixed height, so it can show vertical scrollbars. See FastGrid size. -->_ <fast-grid src="['Layout1','Events1']" id="Simple_Grid" style="height:500px;"></fast-grid> <button onClick="readValue()">Read value [1,A]</button> _<!-- Button to run dedicated API function in grid  -->_ <button onClick="changeValue(FGrid.Grids.Simple_Grid,1,'A','XXX');">Change value [1,A]</button> _<!-- Button to run universal API function with parameters in grid. -->_
```

--------------------------------

### Generate a complete FastGrid Angular example project with npm create fastgrid-angular

Source: https://www.treegrid.com/FDoc/FastGridAngular.html

Use the create-fastgrid-angular project generator to scaffold a ready-to-run example Angular project. This package is optional and not required in an existing application.

```bash
npm create fastgrid-angular@latest my-fastgrid-app
```

--------------------------------

### Install FastGrid Angular package

Source: https://www.treegrid.com/FDoc/FastGridAngular.html

Install the latest fastgrid-angular package for new Angular projects.

```bash
npm install fastgrid-angular@latest
```

--------------------------------

### FastGrid: show predefined dialog derived from Menu

Source: https://www.treegrid.com/FDoc/Menu.htm

Example shows simple dialog derived from 'Menu'. It sets Dialog to 'Menu', defines the menu items with Script.Items, and handles the OnAccept event with an alert displaying the chosen value.

```javascript
FGrid.FastGrid({ Dialog:"Menu", Script: { Items:"|Item 1|Item 2|Item 3" }, Place: { Area:[300,200] }, Events: { OnAccept:function(G,val){ alert("Chosen "+val); } } });
```

--------------------------------

### OnStartEdit

Source: https://www.treegrid.com/FDoc/CellEdit.htm

Called before editing in cell **row** , **col** is started. **value** is the string that will set for editing. If set **test** , it is called just for testing if the editing can be started. Return **true** to not start editing. Or return **string** to edit different value.

```APIDOC
## OnStartEdit

### Description
Called before editing in cell **row** , **col** is started. **value** is the string that will set for editing. If set **test** , it is called just for testing if the editing can be started. Return **true** to not start editing. Or return **string** to edit different value.

### Method
API event

### Parameters
- **grid** (_Grid_) - Required - Grid object.
- **row** (_Row_) - Required - Row object.
- **col** (_Col_) - Required - Column object.
- **value** (_string_) - Required - String that will be set for editing.
- **test** (_bool_) - Required - If true, called for testing if editing can be started.

### Returns
- _any_ - Return **true** to not start editing, or **string** to edit different value.

```

--------------------------------

### Create new fastgrid-svelte project

Source: https://www.treegrid.com/FDoc/FastGridSvelte.html

Generate a new project with fastgrid-svelte.

```bash
npm create fastgrid-svelte@latest
```

--------------------------------

### Install fastgrid-angular and render FastGridComponent in a standalone Angular component

Source: https://www.treegrid.com/FDoc/FastGridAngular.html

Install the fastgrid-angular library in an existing Angular application, then import FastGridComponent into a standalone component and render the <fast-grid> element with a src object that defines columns, header, and body data. The grid is rendered in the browser; with Angular SSR or hydration, keep it in a browser-only component or initialize after the browser mounts.

```bash
npm install fastgrid-angular
```

```typescript
import { Component } from "@angular/core";
import { FastGridComponent } from "fastgrid-angular";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [FastGridComponent],
  template: `
    <fast-grid [src]="src" style="height:500px;" ></fast-grid>
  `
})
export class App {
  readonly src = {
    Cols: ["Name", "Value"],
    Head: [{ D:"Header", V: { Name: "Name", Value: "Value" } }],
    Body: [
      { V: { Name: "Alice", Value: 120 } },
      { V: { Name: "Bob", Value: 85 } }
    ]
  };
}
```
Tokens:
Raw