Docs
API

Understanding FancyGrid

Main elements

Grid contains several basic elements.
They are: title, subtitle, tbar, subTBar, bbar, footer, buttons, columns.
Columns consist of 3 parts: locked, not locked, right locked.



Main config properties

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

columns

Array

Grid columns.

 

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

defaults

Object

Columns default properties.

 

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

height

Number

Grid height.

 

height: 500,

title

String

Grid title text.

 

title: 'Grid of statistics',

width

Number

Grid width.

 

width: 400,
`