Core Properties

bbar

Array

Bottom bar.


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

buttons

Array

Buttons bar


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

cellWrapper

Boolean

Add wrapper div inside of cell.

It is used for advanced styling.


cellWrapper: true
false

clicksToEdit

Number

Number of clicks on cell to show editor.


clicksToEdit: 1
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
},

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

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

footer

Object

Footer bar.


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

gridToGrid

Object

Enables drag and drop from grid to grid.


var grid = new FancyGrid({
  ...
  gridToGrid: {
    dragGroup: 'dd-group-main-office',
    dropGroup: 'dd-group-new-office',
    dropZone: {
      overClass: 'fancy-grid-body'
    },
    onDrop: function(items, rowIndex){
      this.remove(items);
      
      FancyGrid.get('newOffice').insert(rowIndex, items);
    }
  },
  ...
});

height

Mixed

Grid height.

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


height: 500,

height: 'fit',

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

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

multiSelect

Boolean

Enables multi selection if selModel equals 'rows'.


new FancyGrid({
  ...
  multiSelect: true,
  selModel: 'rows',
  ...
false

paging

Boolean

Enable paging.


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

renderTo

String

Dom id, where to render grid.


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

selModel

String

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


new FancyGrid({
  renderTo: 'grid',
  width: 690,
  height: 350,
  selModel: 'rows'
  
  ...

shadow

Boolean

Enable light shadow.


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

striped

Boolean

Enable stripe rows.


striped: false
true

tbar

Array

Toolbar.


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

textSelection

Boolean

Enables default browser text select.


textSelection: true,
false

title

String

Grid title text.


title: 'Grid of statistics',

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