Data

FancyGrid supports many variants of data and approaches of working with it.
FancyGrid is oriented on using indexes(keys) of data.

JSON data

Example: array of objects

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

Indexes are: id, name, surname.

In columns:

columns: [{
  index: 'id',		
  title: 'ID',
  type: 'number'
},{
  index: 'name',		
  title: 'Name',
  type: 'string'
},{
  index: 'surname',		
  title: 'SurName',
  type: 'string'  
}]

Array data

Example: array of arrays

data: [
  [1, 'Ted', 'Smith'],
  [2, 'Ed', 'Johnson']
]

Indexes are: 0, 1, 2.

In columns:

columns: [{
  index: 0,		
  title: 'ID',
  type: 'number'
},{
  index: 1,		
  title: 'Name',
  type: 'string'
},{
  index: 2,		
  title: 'SurName',
  type: 'string'  
}]

Array data with fields

Example: array of arrays, indexes set over fields

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

Indexes are: id, name, surname.

In columns:

columns: [{
  index: 'id',		
  title: 'ID',
  type: 'number'
},{
  index: 'name',		
  title: 'Name',
  type: 'string'
},{
  index: 'surname',		
  title: 'SurName',
  type: 'string'  
}]

Tree Data

In FancyGrid there is way to display nested data.
First you need to define column with type tree

columns: [{
  index: 'name',
  title: 'Name',
  type: 'tree'
},{
...
}]

Next you need nested data with 3 reversed words.
child - for child elements.
expanded - to notify that data node is expanded.
leaf - for leaf nodes.

var data = [{
  name: 'North America',
  type: 'Territory',
  expanded: true,
  child: [{
    name: 'USA',
	type: 'Country',
	population: 325365189,
	child: [{
	  type: 'City',
      name: 'New York',
	  population: 8175133,
      leaf: true
	},{
	  type: 'City',
      name: 'Washington',
	  population: 681170,
      leaf: true
	}]
  },{
    name: 'Canada',
	type: 'Country',
	population: 35151728,
	child: [{
	  type: 'City',
      name: 'Ottawa',
	  population: 934243,
      leaf: true
	},{
	  type: 'City',
      name: 'Toronto',
	  population: 2731571,
      leaf: true
	}]
  },{
    name: 'Mexico',
	type: 'Country',
	population: 123675325,
	child: [{
	  type: 'City',
	  population: 8918653,
	  leaf: true,
	  name: 'Mexico'
	}]
  }]
},{
  ...
}];

new Fancygrid({
  data: {
    items: data,
	fields: ['name', 'type', 'population']
  },
  ...,
  columns: [{
	type: 'tree',
	title: 'Name',
	width: 200,
	index: 'name'
  },{
	...

For tree data it is recommended to set fields in data if nested childs have more params than parents.

new Fancygrid({
  data: {
    items: data,
	fields: ['name', 'type', 'population']
  },

Server data

load file

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

Server response

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

Check your server data, if you load JSON, it should be right, in other case rendering will not run.

Reader

In server response there is property that contains data values.

data: {
  proxy: {
    url: 'users.json',
    reader: {
      root: 'items'
    }
  }
}

Default reader root name is 'data'.

Server response

{
  "items": [
    {"id": 1, "name": "Ted", "surname": "Smith"},
    {"id": 2, "name": "Ed", "surname": "Johnson"}
  ]
}

Server sorting and paging.

If data is sorting or paging on server than grid sends special params on server.

Let us remind how enable server sorting and paging.

new FancyGrid({
  ...
  data: {
    remoteSort: true,
    proxy: {
      url: 'ajax.php'
    }
  },
  paging: true,

Setting pageSize

new FancyGrid({
  ...
  data: {
    remoteSort: true,
    pageSize: 20,
    proxy: {
      url: 'ajax.php'
    }
  },
  paging: true,

On server will be sent following params

Example: desc sorted by index company on second page with limit of 10 rows to show.

sort:company
dir:desc
page:1
limit:10
start:10

Server response

Properties must be wrapped in quotes if you are using jQuery.
jQuery does not run success if there are not quotes.

{
  "data": [...],
  "success": true,
  "totalCount": 22 // needed for paging
}

Server multi-sorting.

If data is multisorted than grid sends another params(comparing to usual sorting) on server.

new FancyGrid({
  ...
  data: {
    remoteSort: true,
    proxy: {
      url: 'ajax.php'
    }
  },
  multiSort: true,

On server it will be sent param sorters

Example: Sorted grid by 2 columns.
Param sorters is Array.
Each item of array contains 3 params - key - column index(key), dir - sorting derection, type - sorter: string|number.

sorters: [{
  key: 'surname',
  dir: 'ASC',
  type: 'string'
},{
  key: 'age',
  dir: 'DESC',
  type: 'number'
}]

Server filtering.

To enable server filtering needs to set remoteFilter: true.
Also on server it sends filter param.

Filter param is array. Each item contains 3 property, they are:

Example of filter request params

filter: [{
  operator: 'lt',
  value: 30,
  property: 'age'
},{
  operator: 'like',
  value: 'Adobe',
  property: 'company'
}]

Operators can not be sent on server as <, >, = and others.
That is why there are alternative names for them.

Communication with server.

In real application very often needed to do read, update, delete, insert data.

For that there is very popular solution - RESTful.

RESTful

data: {
  proxy: {
    type: 'rest',
    url: 'app.php/users'
  }
},

For actions on server will be sent following methods.

read: 'GET'
create: 'POST'
update: 'PUT'
destroy: 'DELETE'

Params that sent to server and get back from it.
Sample with sorting and paging.

read: 'GET'
url - app.php/users?sort=id&dir=asc&page=1&limit=10&start=10

Responce - 
{"success": true, "data": [...]}

create: 'POST'
url - app.php/users

Form Data - 
id:23

Responce - 
{"success":true,"message":"Created new User","data":{"id":23}}

In create action, param id is mainly for information purpose, server gives self id and returns it.
If server will not return id, than id that was sent for this row item will be in grid for sending update and delete actions to server.

update: 'PUT'
url - app.php/users
Form Data - 
id:11
key:name
value:John

destroy: 'DELETE'
url - app.php/users
Form Data - 
id:11

Self CRUD

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

Instead of param delete, it is used destroy because in JavaScript word delete is reserved.

Writer

Very often in apps it needs to send on server params as json.

data: {
  proxy: {
    type: 'rest',
    url: 'app.php/users',      
    writer: {
      type: 'json',
      //allFields: true
    }
  }
},

Set writer.allFields to true if requires to send all data item properties.

Params that sent to server and get back from it.
Sample with sorting and paging.

read: 'GET'
url - app.php/users?sort=company&dir=asc&page=1&limit=10&start=10

Responce - 
{"success": true, data: [...]}

create: 'POST'
url - app.php/users

Request Payload -
{"id":26}
Responce - 
{"success":true,"message":"Created new User","data":{"id":27}}

In create action, param id is mainly for information purpose, server gives self id and returns it.
If server will not return id, than id that was sent for this row item will be in grid for sending update and delete actions to server.

update: 'PUT'
url - app.php/users

Request Payload -
{"id":2,"surname":"John"}

Responce - 
{"success":true,"message": "Updated User 2"}

destroy: 'DELETE'
url - app.php/users

Request Payload -
{"id":11}

Responce - 
{"success":true,"message": "Destroyed User 11"}

AutoLoad - false

By default grid loads data on start.

If to disable this property than requires:
to load data over method grid.load();.

Example

data: {
  proxy: {
    autoLoad: false,
    url: 'clients.php'
  }
},
...
function loadData(){
  grid.load();
}

Default

true

AutoSave - false

By default all changes will be sent on server.

If to disable this property than requires:

1 - to save changes over method grid.save();.

2 - determine how changes should be saved - batched or on every change to send request.
To determine batching use property data.proxy.batch by default it is true.
It will first send create commands than update and than delete.

3 - It would be good to config methods of sending for each command or to use RESTful.
When changes are batched FancyGrid try to send changes as JSON in Request PayLoad.
One change will be sent as object - {id: 5, age: 10}
Several changes will be sent as array [ {id: 5, age: 10}, {id: 7, name: 'John'} ]

4 - also it is possible to config properties that will be sent on server.
All properties or only changed.
By default it sends only changed properties, to send all fields use data.proxy.writer.allFields

Example

data: {
  proxy: {
    autoSave: false,
    method: 'POST',
    url: 'app',
    writer: {
      type: 'json',
      allFields: true
    }
  }
},
...
function saveChanges(){
  grid.save();
}