Docs
API
  • 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.

    To change default name do this.

    
    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:

    operator

    Filter operator.

    value

    Filter value.

    property

    Data index by which needs to filter.

    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

    In case you need self CRUD approach.
    
    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();
    }