### RESTful Create Operation Example
Source: https://fancygrid.com/docs/grid-concepts/data
Example of a POST request for creating a new record.
```text
create: 'POST'
url - app.php/users
Form Data -
id:23
Responce -
{"success":true,"message":"Created new User","data":{"id":23}}
```
--------------------------------
### Initialize Angular Project
Source: https://fancygrid.com/docs/getting-started/angular
Commands to install the Angular CLI and create a new project.
```bash
npm install -g @angular/cli
ng new my-app
cd my-app
ng serve
```
--------------------------------
### Install FancyGrid dependencies
Source: https://fancygrid.com/docs/getting-started/react
Add the FancyGrid library and its React wrapper to your project.
```bash
npm install --save fancygrid fancygrid-react
```
--------------------------------
### Scaffold a Vue project
Source: https://fancygrid.com/docs/getting-started/vue
Commands to install the Vue CLI and initialize a new project.
```bash
npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve
```
--------------------------------
### RESTful Read Operation Example
Source: https://fancygrid.com/docs/grid-concepts/data
Example of a GET request for reading data with sorting and paging parameters.
```text
read: 'GET'
url - app.php/users?sort=id&dir=asc&page=1&limit=10&start=10
Responce -
{"success": true, "data": [...]}
```
--------------------------------
### Including Localization Modules
Source: https://fancygrid.com/docs/getting-started/es6-typescript
Example of importing a specific language module for localization.
```javascript
import 'fancygrid/client/modules/i18n/de';
```
--------------------------------
### Install FancyGrid dependencies
Source: https://fancygrid.com/docs/getting-started/vue
Add the required FancyGrid and Vue wrapper packages to your project.
```bash
npm install --save fancygrid fancy-grid-vue
```
--------------------------------
### Invoke Methods Immediately
Source: https://fancygrid.com/docs/form-concepts/methods
Example of calling a method immediately after initialization when using the full library build.
```javascript
var form = new FancyForm({
...
});
form.setTitle('new Title');
```
--------------------------------
### Install FancyGrid via npm
Source: https://fancygrid.com/docs/getting-started/installation-form
Use the npm package manager to download FancyGrid into your project.
```bash
npm install fancygrid
```
--------------------------------
### Initialize a FancyGrid component in React
Source: https://fancygrid.com/docs/getting-started/react-sample
Demonstrates basic setup of a FancyGrid component with static data and configuration properties.
```javascript
import React, { useState } from "react";
import { render } from "react-dom";
import { Grid } from "fancygrid-react";
const App = () => {
const [height, setHeight] = useState(400);
const [title, setTitle] = useState("Cars");
const [columns, setColumns] = useState([
{ type: "order", locked: true },
{ index: "brand", title: "Brand", locked: true },
{ index: "model", title: "Model", autoWidth: true },
{ index: "manufactured", title: "Manufactured" },
{ index: "color", title: "Shade" },
{ index: "price", title: "Price", type: "currency" }
]);
const [data, setData] = useState([
{
brand: "BMW",
model: "X7",
price: 98700,
manufactured: "Germany",
color: "Black"
},
{
brand: "Land Rover",
model: "DISCOVERY SPORT",
price: 53000,
manufactured: "UK",
color: "Black"
},
{
brand: "Jaguar",
model: "E-PACE",
price: 46642,
manufactured: "UK",
color: "Black"
},
{
brand: "Jaguar",
model: "I-PACE",
price: 109557,
manufactured: "UK",
color: "Gray"
},
{
brand: "Lexus",
model: "NX 200",
price: 38857,
manufactured: "Japan",
color: "Gray"
}
]);
const onGridInit = grid => {};
return (
);
};
render(, document.getElementById("root"));
```
--------------------------------
### RESTful Update Operation Example
Source: https://fancygrid.com/docs/grid-concepts/data
Example of a PUT request for updating a record field.
```text
update: 'PUT'
url - app.php/users
Form Data -
id:11
key:name
value:John
```
--------------------------------
### Basic Grid Implementation
Source: https://fancygrid.com/docs/getting-started/react
Initial setup of a React component using the Grid component with separate methods for columns and data.
```javascript
import React, { Component } from 'react';
import { Grid } from 'fancygrid-react';
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
);
}
```
--------------------------------
### Render FancyGrid component
Source: https://fancygrid.com/docs/getting-started/react
Example of rendering the component within the render method.
```javascript
render() {
return (
);
}
```
--------------------------------
### RESTful Destroy Operation Example
Source: https://fancygrid.com/docs/grid-concepts/data
Example of a DELETE request for removing a record.
```text
destroy: 'DELETE'
url - app.php/users
Form Data -
id:11
```
--------------------------------
### JSON Writer Create Operation
Source: https://fancygrid.com/docs/grid-concepts/data
Example of a create request using JSON payload.
```text
create: 'POST'
url - app.php/users
Request Payload -
{"id":26}
Responce -
{"success":true,"message":"Created new User","data":{"id":27}}
```
--------------------------------
### JSON Writer Read Operation
Source: https://fancygrid.com/docs/grid-concepts/data
Example of a read request using JSON writer configuration.
```text
read: 'GET'
url - app.php/users?sort=company&dir=asc&page=1&limit=10&start=10
Responce -
{"success": true, data: [...]}
```
--------------------------------
### Custom Reader Server Response
Source: https://fancygrid.com/docs/grid-concepts/data
Example response structure when using a custom reader root.
```json
{
"items": [
{"id": 1, "name": "Ted", "surname": "Smith"},
{"id": 2, "name": "Ed", "surname": "Johnson"}
]
}
```
--------------------------------
### Server Multi-Sorting Parameter Structure
Source: https://fancygrid.com/docs/grid-concepts/sorting
Example of the sorters array structure sent to the server when multi-sorting is active.
```javascript
sorters: [{
key: 'surname',
dir: 'ASC',
type: 'string'
},{
key: 'age',
dir: 'DESC',
type: 'number'
}]
```
--------------------------------
### Server Filter Request Parameters
Source: https://fancygrid.com/docs/grid-concepts/filtering
Example structure of the filter array sent to the server, containing operator, value, and property fields.
```javascript
filter: [{
operator: 'lt',
value: 30,
property: 'age'
},{
operator: 'like',
value: 'Adobe',
property: 'company'
}]
```
--------------------------------
### Scaffold a React project
Source: https://fancygrid.com/docs/getting-started/react
Initialize a new React application using create-react-app.
```bash
npx create-react-app my-app
cd my-app
npm start
```
--------------------------------
### Include full library for immediate method access
Source: https://fancygrid.com/docs/grid-concepts/methods
Using the full library build allows methods to be called immediately after initialization.
```html
```
```javascript
var grid = new FancyGrid({
...
});
grid.setTitle('new Title');
```
--------------------------------
### Include Full Library
Source: https://fancygrid.com/docs/form-concepts/methods
Include the full library script to ensure methods are available immediately upon initialization.
```html
```
--------------------------------
### JSON Writer Destroy Operation
Source: https://fancygrid.com/docs/grid-concepts/data
Example of a destroy request using JSON payload.
```text
destroy: 'DELETE'
url - app.php/users
Request Payload -
{"id":11}
Responce -
{"success":true,"message": "Destroyed User 11"}
```
--------------------------------
### JSON Writer Update Operation
Source: https://fancygrid.com/docs/grid-concepts/data
Example of an update request using JSON payload.
```text
update: 'PUT'
url - app.php/users
Request Payload -
{"id":2,"surname":"John"}
Responce -
{"success":true,"message": "Updated User 2"}
```
--------------------------------
### Define Built-in Validation Types
Source: https://fancygrid.com/docs/form-concepts/validation
Examples of applying built-in vtypes to form fields.
```javascript
},{
name: 'email',
label: 'Email',
vtype: 'email'
},{
```
```javascript
},{
name: 'age',
label: 'Age',
type: 'number',
vtype: {
before: ['notempty', 'notnan'],
type: 'range',
min: 20,
max: 70
}
}]
```
```javascript
},{
name: 'age',
label: 'Age',
type: 'number',
vtype: {
before: ['notempty', 'notnan'],
type: 'min',
param: 30
}
}]
```
```javascript
},{
name: 'age',
label: 'Age',
type: 'number',
vtype: {
before: ['notempty', 'notnan'],
type: 'max',
param: 70
}
}]
```
```javascript
},{
name: 'age',
label: 'Age',
type: 'number',
vtype: 'notnan'
}]
```
--------------------------------
### Handle Initialization via Event
Source: https://fancygrid.com/docs/form-concepts/methods
Use the init event to ensure the library is fully loaded before calling methods on the form instance.
```javascript
var form = new FancyForm({
...,
events: [{
init: function(){
formInitedFn();
}
}],
...
});
function formInitedFn(){
form.setTitle('new Title');
}
```
--------------------------------
### Create a context menu
Source: https://fancygrid.com/docs/misc/menu
Configures a context menu using predefined actions and custom menu items.
```javascript
new FancyGrid({
exporter: true,
contextmenu: [
'copy',
'copy+',
'-',
'delete',
'-',
'export',
'-',
{
text: 'Custom',
imageCls: 'custom-menu-item-cls',
sideText: 'CUSTOM',
handler: function(){
alert('Click on custom item');
}
}],
...
})
```
--------------------------------
### Configure renderTo Options
Source: https://fancygrid.com/docs/getting-started/your-first-grid
Demonstrates different ways to specify the rendering target for the grid.
```javascript
new FancyGrid({
renderTo: 'container',
```
```javascript
new FancyGrid({
renderTo: document.querySelector('#container'),
```
```javascript
new FancyGrid(document.querySelector('#container'), {
title: 'Title',
```
--------------------------------
### Create a menu with string and number items
Source: https://fancygrid.com/docs/misc/menu
Demonstrates adding input-capable items like strings and numbers to a menu.
```javascript
new FancyGrid({
tbar: [{
type: 'button',
text: 'File',
menu: [{
type: 'string',
value: 'String',
events: [{
input: function(field, value){
}
}]
},{
type: 'number',
value: 7,
events: [{
input: function(field, value){
}
}]
}]
}],
...
})
```
--------------------------------
### Initialize FancyForm
Source: https://fancygrid.com/docs/form-concepts/methods
Basic structure for initializing a new FancyForm instance.
```javascript
var form = new FancyForm({
...
})
```
--------------------------------
### Include Full Build of FancyGrid
Source: https://fancygrid.com/docs/getting-started/installation-form
Use the full build file if you prefer not to use the module loading system.
```html
```
--------------------------------
### Configure Page Size and Options
Source: https://fancygrid.com/docs/grid-concepts/paging
Define the default page size and the available options in the page size dropdown.
```javascript
new FancyGrid({
paging: {
pageSize: 20,
pageSizeData: [5,10,20,50]
},
...
```
--------------------------------
### Collapse rows on start
Source: https://fancygrid.com/docs/grid-concepts/grouping
Sets the initial state of grouped rows to collapsed using the collapsed property.
```javascript
new FancyGrid({
...
grouping: {
by: 'model',
collapsed: true
},
...
```
--------------------------------
### Configure renderTo Options
Source: https://fancygrid.com/docs/getting-started/your-first-form
Demonstrates different ways to specify the target container for the form.
```javascript
new FancyForm({
renderTo: 'container',
```
```javascript
new FancyForm({
renderTo: document.querySelector('#container'),
```
```javascript
new FancyForm(document.querySelector('#container'), {
title: 'Title',
```
--------------------------------
### Define RESTful Action Methods
Source: https://fancygrid.com/docs/grid-concepts/data
Standard HTTP methods used for CRUD operations in a RESTful setup.
```text
read: 'GET'
create: 'POST'
update: 'PUT'
destroy: 'DELETE'
```
--------------------------------
### Final Grid Implementation
Source: https://fancygrid.com/docs/getting-started/react
Complete component implementation including advanced configuration and data.
```javascript
import React, { Component } from 'react';
import { Grid } from 'fancygrid-react';
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
);
}
getColumns() {
return [{
type: 'select'
},{
index: 'company',
title: 'Company',
type: 'string',
width: 100
}, {
index: 'name',
title: 'Name',
type: 'string',
width: 100
}, {
index: 'surname',
title: 'Sur Name',
type: 'string',
width: 100
}, {
index: 'age',
title: 'Age',
type: 'number',
width: 100
}];
}
getData() {
return [
{name: 'Ted', surname: 'Smith', company: 'Electrical Systems', age: 30},
{name: 'Ed', surname: 'Johnson', company: 'Energy and Oil', age: 35},
{name: 'Sam', surname: 'Williams', company: 'Airbus', age: 38},
{name: 'Alexander', surname: 'Brown', company: 'Renault', age: 24},
{name: 'Nicholas', surname: 'Miller', company: 'Adobe', age: 33}
];
}
}
export default App;
```
--------------------------------
### Fancy.getWidget(id)
Source: https://fancygrid.com/docs/form-concepts/fields
Retrieves a reference to a widget by its ID, allowing for programmatic interaction such as getting or setting values.
```APIDOC
## Fancy.getWidget(id)
### Description
Retrieves a widget instance by its unique identifier. This is useful for manipulating field values dynamically.
### Parameters
- **id** (String) - Required - The unique identifier assigned to the field.
### Example
```javascript
var numberField = Fancy.getWidget('employee');
var newValue = numberField.get() + 2;
numberField.set(newValue);
```
```
--------------------------------
### Initialize FancyTab with Grid Items
Source: https://fancygrid.com/docs/misc/tabs
Creates a tabbed interface containing multiple grid views with shared column configurations.
```javascript
var columns = [{
type: 'image',
index: 'img',
title: 'Photo',
cls: 'column-car-image',
width: 170
},{
index: 'name',
type: 'string',
sortable: true,
width: 100,
title: 'Name'
},{
index: 'price',
type: 'currency',
sortable: true,
title: 'Start Price'
}];
var selModel = 'row',
defaults = {
resizable: true
},
cellHeight = 75;
new FancyTab({
renderTo: 'tabs',
title: 'KIA by types',
width: 500,
height: 450,
resizable: true,
theme: 'gray',
items: [{
title: 'Sub-Compacts',
type: 'grid',
selModel: selModel,
cellHeight: cellHeight,
data: {
proxy: {
url: 'sub-compacts.json'
}
},
defaults: defaults,
columns: columns
},{
title: 'Compacts',
type: 'grid',
selModel: selModel,
cellHeight: cellHeight,
data: {
proxy: {
url: 'compacts.json'
}
},
defaults: defaults,
columns: columns
},{
title: 'Minivans',
type: 'grid',
selModel: selModel,
cellHeight: cellHeight,
data: {
proxy: {
url: 'minivans.json'
}
},
defaults: defaults,
columns: columns
},{
title: 'Luxury Sedans',
type: 'grid',
selModel: selModel,
cellHeight: cellHeight,
data: {
proxy: {
url: 'luxury-sedans.json'
}
},
defaults: defaults,
columns: columns
},{
title: 'Crossovers',
type: 'grid',
selModel: selModel,
cellHeight: cellHeight,
data: {
proxy: {
url: 'suv.json'
}
},
defaults: defaults,
columns: columns
}]
});
```
--------------------------------
### Initialize FancyGrid Container
Source: https://fancygrid.com/docs/grid-concepts/sizing
Include the library script and define the target container element for the grid.
```html
```
--------------------------------
### Include FancyGrid files from local domain
Source: https://fancygrid.com/docs/getting-started/angularjs
Load the required CSS and JavaScript files from a local server path after downloading the build.
```html
```
--------------------------------
### Retrieving Required Modules
Source: https://fancygrid.com/docs/getting-started/es6-typescript
Command to identify which modules are currently in use for production bundling.
```javascript
Fancy.getModulesList();
```
--------------------------------
### Implement FancyGrid in App.js
Source: https://fancygrid.com/docs/getting-started/react
Basic implementation of the FancyGridReact component with configuration and data.
```javascript
import React, { Component } from 'react';
import { FancyGridReact } from 'fancygrid-react';
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
);
}
getConfig() {
return {
height: 400,
width: 500,
columns: [{
index: 'company',
title: 'Company',
type: 'string',
width: 100
}, {
index: 'name',
title: 'Name',
type: 'string',
width: 100
}, {
index: 'surname',
title: 'Sur Name',
type: 'string',
width: 100
}, {
index: 'age',
title: 'Age',
type: 'number',
width: 100
}],
data: [
{name: 'Ted', surname: 'Smith', company: 'Electrical Systems', age: 30},
{name: 'Ed', surname: 'Johnson', company: 'Energy and Oil', age: 35},
{name: 'Sam', surname: 'Williams', company: 'Airbus', age: 38},
{name: 'Alexander', surname: 'Brown', company: 'Renault', age: 24},
{name: 'Nicholas', surname: 'Miller', company: 'Adobe', age: 33}
]
}
}
}
export default App;
```
--------------------------------
### Define a controller with events
Source: https://fancygrid.com/docs/grid-concepts/controllers
Demonstrates defining a controller using Fancy.defineControl and mapping events within the FancyGrid configuration.
```javascript
Fancy.defineControl('mycontrol', {
onCellClick: function(grid, o){
},
onCellDBLClick: function(grid, o){
}
});
var grid = new FancyGrid({
...
events: [{
cellclick: 'onCellClick'
},{
celldblclick: 'onCellDBLClick'
}],
controllers: ['mycontrol'],
...
});
```
--------------------------------
### Importing FancyGrid with Transpilers
Source: https://fancygrid.com/docs/getting-started/es6-typescript
Shows the syntax differences for importing FancyGrid when using Babel versus TypeScript.
```javascript
import Fancy from 'fancygrid';
// Generate the grid
Fancy.Grid({
// config
});
// Generate the form
new Fancy.Form({
//config
});
// Generate the tabs
new Fancy.Tab({
//config
});
```
```typescript
import * as Fancy from 'fancygrid';
// Generate the grid
Fancy.Grid({
// config
});
// Generate the form
new Fancy.Form({
//config
});
// Generate the tabs
new Fancy.Tab({
//config
});
```
--------------------------------
### Initialize FancyGrid with Currency Columns
Source: https://fancygrid.com/docs/grid-concepts/columns
Configures a grid with multiple columns, including calculated currency fields and custom renderers for formatting.
```javascript
document.addEventListener("DOMContentLoaded", function() {
new FancyGrid({
title: 'Hour Rate - Currencies',
renderTo: 'container',
width: 752,
height: 500,
data: data,
selModel: 'row',
trackOver: true,
theme: 'extra-gray',
defaults: {
type: 'string',
width: 100,
resizable: true,
sortable: true,
menu: ['size', '-', 'sort', '-', 'columns', '-', 'lock']
},
columns: [{
index: 'name',
title: 'Name'
}, {
type: 'string',
index: 'country',
title: 'Country'
}, {
index: 'hour',
type: 'currency',
title: 'Hour rate',
width: 70
}, {
index: '12*180*hour',
type: 'currency',
title: 'Dollar',
currency: Fancy.currency.USD,
cellAlign: 'right',
width: 70
}, {
index: '0.91*12*180*hour',
type: 'currency',
title: 'Euro',
currency: Fancy.currency.EUR,
cellAlign: 'right',
render: function(o) {
o.value = Fancy.Number.format(o.value, ',', 0);
return o;
},
width: 90
}, {
index: '0.80*12*180*hour',
type: 'currency',
title: 'Pound',
currency: Fancy.currency.GBP,
cellAlign: 'right',
render: function(o) {
o.value = Fancy.Number.format(o.value, ',', 0);
return o;
},
width: 90
}, {
index: '108.36*12*180*hour',
type: 'currency',
title: 'Yen',
currency: Fancy.currency.JPY,
cellAlign: 'right',
render: function(o) {
o.value = Fancy.Number.format(o.value, ',', 0);
return o;
},
width: 90
}, {
index: '72*12*180*hour',
type: 'currency',
title: 'Ruble',
currency: Fancy.currency.RUB,
cellAlign: 'right',
render: function(o) {
o.value = Fancy.Number.format(o.value, ',', 0);
return o;
},
width: 90
}]
});
});
var data = [{
id: 1,
name: 'Ted Smith',
position: 'Java Developer',
birthday: '06/22/1953',
country: 'USA',
hour: 52
},
{
id: 2,
name: 'Ed Johnson',
position: 'C/C++ Market Data Developer',
birthday: '09/12/1971',
country: 'England',
hour: 16
},
{
id: 3,
name: 'Sam Williams',
position: 'Technical Analyst',
birthday: '09/02/1973',
country: 'USA',
hour: 40
},
{
id: 4,
name: 'Alexander Brown',
position: 'Project Manager',
country: 'USA',
birthday: '09/25/1991',
hour: 33
},
{
id: 5,
name: 'Nicholas Miller',
position: 'Senior Software Engineer',
country: 'Canada',
birthday: '08/24/1959',
hour: 50
},
{
id: 6,
name: 'Andrew Thompson',
position: 'Agile Project Manager',
country: 'Germany',
birthday: '08/18/1978',
hour: 27
},
{
id: 7,
name: 'Ryan Walker',
position: 'Application Support Engineer',
country: 'England',
birthday: '04/02/1981',
hour: 40
},
{
id: 8,
name: 'John Scott',
position: 'Flex Developer',
country: 'USA',
birthday: '02/14/1960',
hour: 71
},
{
id: 9,
name: 'James Phillips',
position: 'Senior C++/C# Developer',
country: 'USA',
birthday: '10/18/1991',
hour: 58
},
{
id: 10,
name: 'Brian Edwards',
position: 'UNIX/C++ Developer',
country: 'USA',
birthday: '04/16/1963',
hour: 64
},
{
id: 11,
name: 'Jack Richardson',
position: 'Ruby Developer',
country: 'Germany',
birthday: '11/20/1982',
hour: 58
},
{
id: 12,
name: 'Alex Howard',
position: 'CSS3/HTML5 Developer',
country: 'USA',
birthday: '07/22/1987',
hour: 66
},
{
id: 13,
name: 'Carlos Wood',
position: 'Node.js Developer',
country: 'USA',
birthday: '08/08/1988',
hour: 41
},
{
id: 14,
name: 'Adrian Russell',
position: 'Frontend Developer',
country: 'Canada',
birthday: '06/19/1969',
hour: 25
},
{
id: 15,
name: 'Jeremy Hamilton',
position: 'Scala Developer',
country: 'USA',
birthday: '04/17/1950',
hour: 69
},
{
id: 16,
name: 'Ivan Woods',
position: 'Objective C Developer',
country: 'USA',
birthday: '03/25/1964',
hour: 64
},
{
id: 17,
name: 'Peter West',
position: 'PHP/HTML Developer',
country: 'England',
birthday: '09/06/1977',
hour: 30
},
{
id: 18,
name: 'Lorenzo Tucker',
position: 'Architect',
country: 'USA',
birthday: '10/25/1975',
hour: 41
},
{
id: 19,
name: 'Randy Grant',
position: 'Engineer',
country: 'USA',
birthday: '07/16/1969',
hour: 50
},
{
id: 20,
name: 'Arthur Gardner',
position: 'Analytic',
country: 'USA',
birthday: '09/26/1994',
hour: 16
},
{
id: 21,
name: 'Orlando Ruiz',
position: 'Unit Testing Developer',
country: 'Germany',
```
--------------------------------
### Import FancyGrid component
Source: https://fancygrid.com/docs/getting-started/react
Importing the component using full or short names.
```javascript
import { FancyGridReact } from 'fancygrid-react';
```
```javascript
import { Grid } from 'fancygrid-react';
```
--------------------------------
### Configure paging
Source: https://fancygrid.com/docs/grid-concepts/core-properties
Enables pagination for the grid.
```javascript
new FancyGrid({
...
paging: true,
...
```
--------------------------------
### Configure Grid Dimensions and Title
Source: https://fancygrid.com/docs/grid-concepts/understanding-fancygrid
Set basic layout properties including height, width, and the grid title.
```javascript
height: 500,
```
```javascript
title: 'Grid of statistics',
```
```javascript
width: 400,
```
--------------------------------
### FancyGrid Configuration Properties
Source: https://fancygrid.com/docs/grid-concepts/understanding-fancygrid
Overview of the main configuration properties used to initialize and define the behavior of a FancyGrid instance.
```APIDOC
## FancyGrid Configuration
### Description
Configuration properties used to define the structure, data source, and appearance of a FancyGrid component.
### Properties
- **data** (Object|Array) - The data source for the grid. Supports direct arrays, JSON objects, proxy URLs, REST endpoints, and chart integration.
- **columns** (Array) - Definition of grid columns including index, title, locked status, width, and type.
- **defaults** (Object) - Default properties applied to all columns (e.g., type, width, editable, sortable).
- **height** (Number) - The height of the grid in pixels.
- **width** (Number) - The width of the grid in pixels.
- **title** (String) - The display title for the grid.
### Configuration Example
```javascript
new FancyGrid({
title: 'Grid of statistics',
width: 400,
height: 500,
data: [
{id: 1, name: 'Ted', surname: 'Smith'}
],
columns: [{
index: 'id',
title: 'Id',
width: 50
}],
defaults: {
type: 'string',
sortable: true
}
});
```
```
--------------------------------
### Configure controllers
Source: https://fancygrid.com/docs/grid-concepts/core-properties
Defines application controllers for logic separation.
```javascript
FancyGrid.defineController('mycontrol', {
controls: [{
event: 'cellclick',
selector: '.sign-minus',
handler: 'onClickMinus'
},{
event: 'cellclick',
selector: '.sign-plus',
handler: 'onClickPlus'
}],
onClickMinus: function(grid, o){
},
onClickPlus: function(grid, o){
},
});
var grid = new FancyGrid({
...
controllers: ['mycontrol'],
...
});
Copy
```
--------------------------------
### Configure spin and step for number columns
Source: https://fancygrid.com/docs/grid-concepts/columns
Enables spinner buttons and sets increment steps for numeric columns.
```javascript
columns: [{
...
title: 'Salary',
index: 'salary',
type: 'number',
spin: true,
step: 1000,
min: 0,
max: 150000,
format: {
inputFn: salaryInputFn
}
...
]
```
--------------------------------
### Configure selection property
Source: https://fancygrid.com/docs/grid-concepts/core-properties
Sets the configuration for grid selection.
```javascript
new FancyGrid({
renderTo: 'grid',
width: 690,
height: 350,
selection: {
row: true
}
...
```
--------------------------------
### Define a Custom Theme
Source: https://fancygrid.com/docs/design-and-style/themes
Create a new theme using Fancy.defineTheme and associated CSS rules.
```css
.fancy-theme-my .fancy-grid-cell {
color: #888888;
}
...
```
```javascript
Fancy.defineTheme('my', {
config: {
cellHeaderHeight: 30,
cellHeight: 32,
titleHeight: 42,
barHeight: 37,
bottomScrollHeight: 12
}
});
```
--------------------------------
### Set simple text for title and subTitle
Source: https://fancygrid.com/docs/form-concepts/title
Use string values to define basic title and subtitle text.
```javascript
title: 'Title',
subTitle: 'Sub Title',
```
--------------------------------
### Importing Grid Component
Source: https://fancygrid.com/docs/getting-started/react
Minimal import statement for the Grid component.
```javascript
import { Grid } from 'fancygrid-react';
```
--------------------------------
### Enable Remote Sorting and Paging
Source: https://fancygrid.com/docs/grid-concepts/data
Initializes the grid with remote sorting and paging enabled.
```javascript
new FancyGrid({
...
data: {
remoteSort: true,
proxy: {
url: 'ajax.php'
}
},
paging: true,
```
--------------------------------
### Configure buttons
Source: https://fancygrid.com/docs/grid-concepts/core-properties
Defines the buttons bar.
```javascript
buttons: [{
type: 'button',
text: 'Text',
handler: function(){}
}],
Copy
```
--------------------------------
### Configure theme property
Source: https://fancygrid.com/docs/grid-concepts/core-properties
Enables a custom theme for the grid.
```javascript
theme: 'my'
```
--------------------------------
### Fetch data for FancyGrid in React
Source: https://fancygrid.com/docs/getting-started/react-sample
Shows how to populate grid data asynchronously using a toolbar button handler.
```javascript
import React, { useState } from "react";
import { render } from "react-dom";
import { Grid } from "fancygrid-react";
const App = () => {
const [height, setHeight] = useState(400);
const [title, setTitle] = useState("Cars");
const [columns, setColumns] = useState([
{ type: "order", locked: true },
{ index: "brand", title: "Brand", locked: true },
{ index: "model", title: "Model", autoWidth: true },
{ index: "manufactured", title: "Manufactured" },
{ index: "color", title: "Shade" },
{ index: "price", title: "Price", type: "currency" }
]);
const [data, setData] = useState([]);
return (