Docs
API

    • Config

    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,

    cellTrackOver

    Boolean

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

     
    
cellTrackOver: true
    false

    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

    cls

    String

    The CSS class to add to this element.
    It needs to be careful with it.
    If form is rendered in panel(if you are using title, bars, footer) than it is added to panel.
    In other case it is added to form. 

    
cls: 'my',
    ''

    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,
    true

    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();
    false

    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|Object

    Enables filter methods.

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

    flexScrollSensitive

    Boolean

    When one of column has flex param to calculation width than it will
    add for calculation left scrollbar width.
    flexScrollSensitive signals do not use scroll width. 

    
var grid = new FancyGrid({
  ...
  flexScrollSensitive: false,
  columns: [{
    flex: 1
  },{  
  ...
});
    true

    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

    rowDragDrop

    Boolean

    Enables row drag and drop.
    It requires enabling selModel: 'row' || 'rows'. 

    
rowDragDrop: true
    false

    rowEdit

    Boolean|Object

    Enables row edit.

     
    
rowEdit: true

    
rowEdit: {}
    false

    rowLines

    Boolean

    Enable row lines.

     
    
rowLines: false
    true

    searching

    Boolean

    Enable search methods.

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

grid.search('Nick');
    false

    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

    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

    startEditByTyping

    Boolean

    Enables edit cell by typing. 

    
new FancyGrid({    
  renderTo: 'grid',
  width: 690,
  height: 350,
  startEditByTyping: 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

    subTBar is used as extra bar for grid's top when
    tbar is not enough. 

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

    subTBarHeight

    Number

    Property to set subTBar height.

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

    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