Docs
API
  • Config

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

    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

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

    selection

    Object

    Config of selection.

    
    new FancyGrid({
      renderTo: 'grid',
      width: 690,
      height: 350,
      selection: {
        row: true
      }
      
      ...
    

    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