Docs
API

Core Properties

barHeight

Number

Theme property to set bar-s height.
Read more in Desing and Style section. 


barHeight: 30,
bbar: [{
  type: 'button',
  text: 'Text',
  handler: function(){}
}],

bbar

Array

Bottom bar.

 

bbar: [{
  type: 'button',
  text: 'Text',
  handler: function(){}
}],

bbarHeight

Number

Property to set bbar height.

 

bbarHeight: 30,
bbar: [{
  type: 'button',
  text: 'Text',
  handler: function(){}
}],

buttons

Array

Buttons bar

 

buttons: [{
  type: 'button',
  text: 'Text',
  handler: function(){}
}],

cellHeaderHeight

Number

Theme property to set cell-s height in header.
Read more in Desing and Style section. 


cellHeaderHeight: 30,
columns: [...]

cellHeight

Number

Theme property to set height of cells in grid bodies.
Read more in Desing and Style section. 


cellHeight: 32,

cellWrapper

Boolean

Add wrapper div inside of cell.

It is used for advanced styling.

 

cellWrapper: true
false

clicksToEdit

Number|Boolean

Number of clicks on cell to show editor.

 

clicksToEdit: 1

Disable opening row edit over click


clicksToEdit: false
2

columnClickData

Boolean

Enable adding column data.

By default in columnclick event there are not data of column because for big data it is not fast.

If still data of column is needed than it is needed to enable columnClickData.

 

columnClickData: true
false

columnLines

Boolean

Enable column lines.

 

columnLines: false
true

columns

Array

Grid columns.

 

columns: [{
  index: 'id',
  title: 'Id',
  locked: true,
  width: 50,
  type: 'number'
},{
  index: 'company',
  title: 'Company'
}]

columnTrackOver

Boolean

Enable adding css classname fancy-grid-column-over on column, when mouseover.

 

columnTrackOver: true
false

controllers

Array

Controllers is the way to provide application architecture.
It helps to divide application code along logical lines.
It is possible to write code without controllers.
Controllers are structured alternative to events.


To start work with controller, it needs to define it over FancyGrid.defineController 


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'],
  ...
});

data

Object|Array

Grid data.

Data in grid can be set in many ways, depending on needs.

 JSON data 

data: [
  {id: 1, name: 'Ted', surname: 'Smith'},
  {id: 2, name: 'Ed', surname: 'Johnson',
]
Array data 

data: {
  items: [
    [1, 'Ted', 'Smith'],
    [2, 'Ed', 'Johnson']
  ]
}
Array data with fields 

data: {
  fields: ['id', 'name', 'surname'],
  items: [
    [1, 'Ted', 'Smith'],
    [2, 'Ed', 'Johnson']
  ]
}
Load JSON file. 

data: {
  proxy: {
    url: 'users.json'
  }
},
RESTfull 

data: {
  proxy: {
    type: 'rest',
    url: 'app.php/users'
  }
},
CRUD.
Server API for create, read, update, delete. 

data: {
  proxy: {
    methods: {
      create: 'POST',
      read: 'POST',
      update: 'POST',
      destroy: 'POST'
    },
    api: {
      create: 'new.php',
      read: 'load.php',
      update: 'update.php',
      destroy: 'destroy_action.php'
    }
  }
},
Read data from chart 

data: {
  chart: {
    type: 'highchart',
    id: 'chart',
    fields: ['toyota', 'gm', 'vw', 'ford', 'hyundai']
  }
},
Send data from grid to chart 

data: {
  items: [
    { toyota: 6800228, gm: 5779719, vw: 5429896, ford: 3956708, hyundai: 2003608 },
    { toyota: 7211474, gm: 6259520, vw: 5964004, ford: 3565626, hyundai: 2292075 }
  ],
  chart: [{
    type: 'highchart',
    id: 'column',
    fields: ['toyota', 'gm', 'vw', 'ford', 'hyundai']
  }]
},

defaults

Object

Columns default properties.

 

defaults: {
  type: 'string',
  width: 100,
  editable: true,
  sortable: true
},

dirtyEnabled

Boolean

Disable/enable dirty edit.

 

dirtyEnabled: false,

draggable

Boolean

If window param is true than draggable enables dragging of element over header.

 

var grid = new FancyGrid({
  window: true,
  modal: true,
  draggable: true,
  ...
});

grid.show();

doubleHorizontalScroll

Boolean

This property works if nativeScroller: false.

Enable second horizontable scroller on top. 


new FancyGrid({
  doubleHorizontalScroll: true,
  ...
});
false

events

Array

Grid event handlers.

 

var grid = new FancyGrid({
  ...
  events: [{
    cellclick: function(o){
      
    },
    scope: {}// not required
  },{
    celldblclick: function(o){
      
    }
  }]
  ...
});

expander

Object

Row expander.

 

expander: {
  tpl: [
    '<div style="float: left;">',
      '<img src="{image}" class="image-staff">',
    '</div>',
    '<div style="float: left;">',
      '<p>{name} {surname}</p>',
      '<p><b>Salary:</b> {salary}</p>',
      '<p><b>Phone:</b> {phone}</p>',
    '</div>'
  ].join(""),
  dataFn: function(grid, data){
    data.salary = '$' + (data.hour * 170 * 12).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
     
    return data;
  }
},


expander: {
  render: function(renderTo, data, columnsWidth){
    new FancyGrid({
      renderTo: renderTo,
      width: columnsWidth - 20,
      height: 'fit',
      minHeight: 100,
      trackOver: true,
      selModel: 'rows',
      theme: 'gray',
      cellHeight: 92,
      data: data.sold,
      emptyText: 'Nothing to display',
      defaults: {
        type: 'string'
      },
      columns: [{
        index: 'image',
        width: 180,
        type: 'image',
        cls: 'image-car',
        title: '',
        locked: true
      },{
        index: 'name',
        width: 140,
        title: 'Name'
      },{
        index: 'price',
        width: 79,
        type: 'currency',
        title: 'price',
      },{
        title: 'Color',
        index: 'color',
        width: 70,
        type: 'color',
        cls: 'color-column'
      }]
    });
  }
},

exporter

Boolean

Enables export methods(Excel).
To generate Excel file, it is used SheetJS 


var grid = new FancyGrid({
  window: true,
  modal: true,
  exporter: true,
  ...
});
...
grid.exportToExcel();
false

filter

Boolean

Enables filter methods.

 

var grid = new FancyGrid({
  window: true,
  modal: true,
  filter: true,
  ...
});
...
grid.addFilter('age', '35', '<');

footer

Object

Footer bar.

 

var grid = new FancyGrid({
  ...
  footer: {
    status: '* - Devices online per 100 inhabitants in 2015',
    source: {
      text: 'OECD',
      link: 'oecd.org'
    }
  },
  ...
});

height

Mixed

Grid height.

If value is 'fit', height will be set to content.

 

height: 500,


height: 'fit',

id

String

There are several ways to get link on grid object.
One of which is to set id and than to use Fancy.getWidget('myGrid').

 

new FancyGrid({
  id: 'myGrid'
});

...
var grid = Fancy.getWidget('myGrid');

i18n

String

Localization.

 

var grid = new FancyGrid({
  title: 'Localization - German',
  i18n: 'ge',
  ...
});

lang

Object

Localization.

 

var grid = new FancyGrid({
  title: 'Localization - German',
  lang: {
    paging: {
      of: 'von [0]',
      info: 'Zeilen [0] - [1] von [2]'
    }
  }
  ...
});

nativeScroller

Boolean

Enables Native Scroller.

 

new FancyGrid({
  nativeScroller: true,
  ...
});
false

modal

Boolean

It enables modal for grid.

It requires do not define renderTo and set window.

 

var grid = new FancyGrid({
  window: true,
  modal: true,
....
});

grid.show();
false

paging

Boolean

Enable paging.

 

new FancyGrid({
  ...
  paging: true,
  ...
false

renderOuter

Mixed

renderOuter is alternative to renderTo.
The only difference is that widget renders not in container but fills containers.
It helps to avoid using extra dom element as container. 


<div id="container"></div>
...

new FancyGrid({    
  renderOuter: 'container',
  width: 690,
  height: 350,
  ...


<div id="container"></div>
...

new FancyGrid({
  renderOuter: document.querySelector('#container'),
  width: 690,
  height: 350,
  ...

renderTo

Mixed

Dom/id, where to render grid.

 

<div id="container"></div>
...

new FancyGrid({    
  renderTo: 'container',
  width: 690,
  height: 350,
  ...


<div id="container"></div>
...

new FancyGrid({
  renderTo: document.querySelector('#container'),
  width: 690,
  height: 350,
  ...


<div id="container"></div>
...

new FancyGrid(document.querySelector('#container'), {
  width: 690,
  height: 350,
  ...

resizable

Boolean

Specify as true to allow resizing, false to disable resizing.

 

var grid = new FancyGrid({
  resizable: true
....
});
false

rowEdit

Boolean|Object

Enables row edit.

 

rowEdit: true


rowEdit: {}
false

rowLines

Boolean

Enable row lines.

 

rowLines: false
true

selection

Object

Config of selection.

 

new FancyGrid({
  renderTo: 'grid',
  width: 690,
  height: 350,
  selection: {
    row: true
  }
  
  ...

selModel

String|Object

Selection model.
Possible values: 'cell', 'cells', 'row', 'rows', 'column', 'columns'.

 

selMode: 'rows',


selModel: {
  type: 'rows',
  memory: true,
  checkOnly: true
},
false

searching

Boolean

Enable search methods.

 

var grid = new FancyGrid({
  width: 690,
  height: 350,
  shadow: false,
  searching: true,
  ...
});

grid.search('Nick');
false

shadow

Boolean

Enable light shadow.

 

new FancyGrid({    
  renderTo: 'grid',
  width: 690,
  height: 350,
  shadow: false,
  ...
true

singleExpand

Boolean

It is used for Tree Data only.
Only 1 node per branch may be expanded. 


new FancyGrid({    
  renderTo: 'grid',
  width: 690,
  height: 350,
  singleExpand: true,
  ...
false

stateId

String

Id for store grid state config in localStorage.

 

striped: true
false

stateful

Boolean|Object

Enables memorizing of grid params states like: sorting, filtering, paging, column sizes.

To desable state action needs to choose from list and set false.

 

striped: true


stateful: {
  filter: false
}
false

striped

Boolean

Enable stripe rows.

 

striped: false
true

subTBar

Array

Sub tbar is extra bar for top.It is used only with tbar.

 

tbar: [{
  type: 'button',
  text: 'Text',
  handler: function(){}
}],
subTBar: [{
  type: 'button',
  text: 'Extra 1',
  handler: function(){}
}]

subTBarHeight

Number

Property to set subTBar height.

 

subTBarHeight: 30,
subTBar: [{
  type: 'button',
  text: 'Text',
  handler: function(){}
}],

summary

Mixed

Enable row summary.
Also requires to add property summary for column. 


new FancyGrid({
  ...,
  summary: true,
  columns: [{
    ...,
	summary: 'sum'
  },{

tbar

Array

Toolbar.

 

tbar: [{
  type: 'button',
  text: 'Add',
  action: 'add'
}],

tbarHeight

Number

Property to set tbar height.

 

tbarHeight: 30,
tbar: [{
  type: 'button',
  text: 'Text',
  handler: function(){}
}],

tabScrollStep

Number

tabScrollStep is used to modify tabs step scrolling value.

 

textSelection: 80,
30

textSelection

Boolean

Enables default browser text select.

 

textSelection: true,
false

title

String

Grid title text.

 

title: 'Grid of statistics',

titleHeight

Number

Theme property to set panel title height.
Read more in Desing and Style section. 


titleHeight: 42,

theme

String

If you defined new theme, than property theme will enable it for grid.

 

theme: 'my'

trackOver

Boolean

Enable adding css classname fancy-grid-cell-over on all cells of row, when mouseover.

 

trackOver: true
false

width

Mixed

Grid width.

If width is not set than grid width become responsive.

If value is 'fit', width will be set to content.

 

width: 400,


height: 'fit',

window

Boolean

This param is used if grid is hidden on start and should be shown later.

It does grid positioned absolute.
It requires do not define renderTo. 


var grid = new FancyGrid({
  window: true,
  modal: true,
....
});

grid.show();
false
`