Docs
API
  • Methods

    
    var grid = new FancyGrid({
      ...
    });
    ...
    grid.setTitle('new Title');
    

    To use methods immediately after initialize widget read the following note.

    If library was included fully

    
    <script src="http://cdn.fancygrid.com/fancy.full.min.js"></script>
    
    Than methods available immediately.
    
    var grid = new FancyGrid({
      ...
    });
    grid.setTitle('new Title');
    
    
    In all other cases it is not possible to use methods immediately.
    Library needs a moment to load required modules.
    So it needs to wait till library would be inited.
    For that use event init
    
    var grid = new FancyGrid({
      ...,
      events: [{
        init: function(){
          gridInitedFn();
        }
      }],
      ...
    });
    
    function gridInitedFn(){
      grid.setTitle('new Title');
    }
    
    

    To get link on widget from any place there are 2 approaches.

    If it was set renderTo property than use FancyGrid.get('renderToID')

    
    new FancyGrid({
      renderTo: 'myGridReport',
      ...
    });
    
    function updateGridTitle(){
      var grid = FancyGrid.get('myGridReport');
      
      grid.setTitle('New Title');
    }
    
    

    Another approach to set id and to use Fancy.getWidget('gridId')

    
    new FancyGrid({
      id: 'myGrid',
      ...
    });
    
    function updateGridTitle(){
      var grid = Fancy.getWidget('myGrid');
      
      grid.setTitle('New Title');
    }
    
    

    add

    (config: Object)

    insert data item on last position.

    
    grid.add({
      id: 25, // not required
      name: 'John', // not required
      someProperty: 1, // not required
    });
    

    addChild

    (config: Object)

    Method addChild is used for only Tree Data.
    It appends child to node.
    If execute this method with one param it append child to top level.
    Special tree properties are: expanded, child, leaf.

    
    grid.addChild({
      name: name,
      type: type,
      expanded: true,
      child: []
    });
    

    addChild

    (item:Number|String|Model, config: Object)

    Method addChild is used for only Tree Data.
    It appends child to node.
    If execute this method with one param it append child to top level.
    Special tree properties are: expanded, child, leaf.

    
    grid.addChild(id, {
      name: name,
      type: type,
      leaf: true
    });
    

    addColumn

    (column: Object)

    Add column to grid to center side at last order index.

    
    grid.addColumn({
      title: 'Age',
      index: 'age',
      type: 'string',
      width: 80
    });
    

    addColumn

    (column: Object, side: String)

    Add column to grid to side at last order index.
    Possible side value: 'left', 'center', 'right'.

    
    grid.addColumn({
      title: 'Age',
      index: 'age',
      type: 'string',
      width: 80
    }, 'left');
    

    addColumn

    (column: Object, side: String, orderIndex: Number)

    Add column to grid to side at last order index.
    Possible side value: 'left', 'center', 'right'.

    
    grid.addColumn({
      title: 'Age',
      index: 'age',
      type: 'string',
      width: 80
    }, 'left', 0);
    

    addFilter

    (index: String, value: Mixed)

    Add filter by index with value.

    To use this method it requires to set property filter to true

    
    var grid = new FancyGrid({
      ...,
      filter: true,
      ...
    });
    
    grid.addFilter('name', 'Nick');
    

    addFilter

    (index: String, value: Mixed, sign: String)

    Add filter by index with value and sign.
    List of signs available in section Filtering

    To use this method it requires to set property filter to true

    
    var grid = new FancyGrid({
      ...,
      filter: true,
      ...
    });
    
    grid.addFilter('age', 30, '<');
    
    Filtering date column
    
    var grid = new FancyGrid({
      ...,
      filter: true,
      ...
    });
    //Find items with dates less than 1-st January of 1977
    grid.addFilter('birthday', new Date(1977, 0, 1), '<');
    
    Filtering date column with string value.
    In FancyGrid there is help function to parse string value to date.
    It is Fancy.Date.parse('1977.07.21', 'Y.m.d');
    
    var grid = new FancyGrid({
      ...,
      filter: true,
      ...
    });
    
    //Find items with dates more than 21-st July of 1977
    grid.addFilter('birthday', Fancy.Date.parse('1977.07.21', 'Y.m.d'), '>');
    

    clearData

    ()

    Clears grid from data.

    
    var grid = new FancyGrid({
      ...
    });
    ...
    grid.clearData();
    

    clearFilter

    ()
    Clear all filters.

    To use this method it requires to set property filter to true

    
    var grid = new FancyGrid({
      ...,
      filter: true,
      ...
    });
    
    grid.clearFilter();
    

    clearFilter

    (index: String)
    Clear filters by index.

    To use this method it requires to set property filter to true

    
    var grid = new FancyGrid({
      ...,
      filter: true,
      ...
    });
    
    grid.clearFilter('name');
    

    clearFilter

    (index: String, sing: String)
    Clear filters by index and sign.

    To use this method it requires to set property filter to true

    
    var grid = new FancyGrid({
      ...,
      filter: true,
      ...
    });
    
    grid.clearFilter('age', '<');
    

    clearSelection

    ()
    Clear all selection.
    Grid auto clear selection in all needed cases,
    usually this method is not used.
    
    grid.clearSelection();
    

    collapse

    (id: Number|String|Model)

    It is used only for Tree Data.
    Collapse tree node.

    
    grid.collapse(1007);
    

    collapseAll

    (id: Number|String|Model)

    It is used only for Tree Data.
    Collapse all tree nodes.

    
    grid.collapseAll();
    

    copy

    ()

    Copy in buffer selected data.

    
    grid.copy();
    

    destroy

    ()

    destroy grid.

    
    grid.destroy();
    

    deSelectRow

    (rowIndex: number)

    Deselect row grid.

    
    grid.deSelectRow(1);
    

    disableSelection

    ()

    Disable checkboxes for selection.

    
    grid.disableSelection();
    

    destroy

    ()

    destroy grid.

    
    grid.destroy();
    

    each

    (fn: Function, [scope: Object])

    Goes through all displayed items.

    
    grid.each(function(item){
      ...
    });
    

    enableSelection

    ()

    Enable checkboxes for selection if were disabled before.

    
    grid.enableSelection();
    

    expand

    (id: Number|String|Model)

    It is used only for Tree Data.
    Expand tree node.

    
    grid.expand(1007);
    

    expandAll

    (id: Number|String|Model)

    It is used only for Tree Data.
    Expand all tree nodes.

    
    grid.expandAll();
    

    exportToCSV

    ()

    Export data to csv file.

    Requires to set property exporter: true

    
    grid.exportToCSV();
    
    
    //With header
    grid.exportToCSV({
      header: true
    });
    
    
    //Custom separator
    grid.exportToCSV({
      separator: ' '
    });
    

    exportToExcel

    ()

    Export data to Excel file.
    To generate Excel file, it is used SheetJS

    Requires to set property exporter: true

    
    var grid = new FancyGrid({
      window: true,
      modal: true,
      exporter: true,
      ...
    });
    ...
    grid.exportToExcel();
    

    find

    (key: String, value: Mixed): Array

    Finds items by value and returns data items row indexes.

    
    grid.find('name', 'Tom'); // [1, 5]
    

    findItem

    (key: String, value: Mixed): Array

    Finds items by value and returns data items.

    
    grid.findItem('name', 'Tom'); // [{id: 2, age: 35,...}, {id: 5, age: 25, ...}]
    

    firstPage

    ()

    Loads the first 'page'.
    Usually it is used for custom paging.

    
    var grid = new FancyGrid({
      ...
      paging: {
        barType: 'none'
      }
      ...
    ...
    grid.firstPage();
    

    flashCell

    (rowIndex: Number, orderIndex: Number)

    Flash cell at rowIndex and columnIndex.

    
    grid.flashCell(2, 5);
    

    flashCell

    (rowIndex: Number, orderIndex: Number, side: String)

    To flash cell in locked side it requires to determine side.

    
    grid.flashCell(7, 2, 'left');
    
    grid.flashCell(2, 2, 'right');
    

    flashRow

    (rowIndex: Number)

    Flash cells of row.

    
    grid.flashRow(21);
    

    get

    ([rowIndex: Number], [key: String]): Array/Model/Mixed

    If params are empty than returns array of data items(Models).

    If rowIndex is defined than returns data item(Model) at rowIndex.

    If both rowIndex and key are defined than returns data item key value(Mixed) at rowIndex.

    
    grid.get();//return array of items:Models
    
    
    grid.get(10);//return data item: Model
    
    
    grid.get(10, 'age');//return data item key value.
    

    getById

    (id: Number): Model

    returns data item: Model.

    
    grid.getById(10);//return data item(Model)
    

    getData

    (): Array

    returns data.

    
    grid.getData();
    

    getDataAsCSV

    ([params: Object]): String

    Returns csv data.

    Requires to set property exporter: true

    
    grid.getDataAsCSV();
    
    
    //with headers
    grid.getDataAsCSV({
      header: true
    });
    
    
    //Custom separator
    grid.getDataAsCSV({
      separator: ' '
    });
    

    getDataFiltered

    (): Array

    returns filtered data that stored locally.

    
    grid.getDataFiltered();
    

    getDataView

    (): Array

    returns displayed data.

    
    grid.getDataView();
    

    getPage

    (): Number

    Return current active 'page'.
    Usually it is used for custom paging.

    
    var grid = new FancyGrid({
      ...
      paging: {
        barType: 'none'
      }
      ...
    ...
    var page = grid.getPage();
    

    getPages

    (): Number

    Return number of pages.
    It is used only for paging.

    
    var grid = new FancyGrid({
      ...
      paging: {
        barType: 'none'
      }
      ...
    ...
    var pages = grid.getPages();
    

    getPageSize

    (): Number

    Return current 'page' size.
    Usually it is used for custom paging.

    
    var grid = new FancyGrid({
      ...
      paging: {
        barType: 'none'
      }
      ...
    ...
    var pageSize = grid.getPageSize();
    

    getRowById

    (id: Number|String): Number

    Returns displayed row index of data item.

    
    var rowIndex = grid.getTotal(id);
    

    getSelection

    ():Array
    Returns models of selected rows.
    It works only if selModel is row or rows, in other cases it returns empty array.
    
    grid.getSelection();
    

    getSubTitle

    (): String

    returns sub title text value.

    
    var subTitle = grid.getSubTitle();
    

    getTitle

    (): String

    returns title text value.

    
    var title = grid.getTitle();
    

    getTotal

    (): Number

    returns total data count.

    
    var total = grid.getTotal();
    

    getViewTotal

    (): Number

    returns total displayed data count.

    
    var total = grid.getViewTotal();
    

    insert

    (config: Object)
    insert data item on row with index 0.

    Values: add.

    
    grid.insert({
      id: 25, // not required
      name: 'John', // not required
      someProperty: 1, // not required
    });
    

    insert

    (index: Number, config: Object)

    insert data item on index.

    
    grid.insert(1, {
      id: 25, // not required
      name: 'John', // not required
      someProperty: 1, // not required
    });
    

    hide

    ()

    hide grid.

    
    grid.hide();
    

    hideColumn

    (dataIndex: String)

    Hide column. dataIndex is column index of data.

    
    new FancyGrid({
      ...
      columns: [{
        index: 'name',
    	title: 'Name',
      ...
    
    grid.hideColumn('name');
    

    hideColumn

    (orderIndex: Number)

    Hide column by it's order in columns. orderIndex is order in columns.

    
    grid.hideColumn(0);
    

    hideColumn

    (side: String, dataIndex: String)

    Hide column by it's order in columns. orderIndex is order in columns.

    
    grid.hideColumn('left', 'name');
    grid.hideColumn('right', 'surname');
    

    hideLoadMask

    ()

    Show mask text and unblock grid/panel from transparent div.
    Usually used in pair with showLoadMask

    
    function showLoadMask(text){
      Fancy.getWidget('myGrid').showLoadMask('Searching');
    }
    
    function hideLoadMask(){
      setTimeout(function(){
        Fancy.getWidget('myGrid').hideLoadMask();
      }, 1000);
    }
    

    lastPage

    ()

    Loads the last 'page'.
    Usually it is used for custom paging.

    
    var grid = new FancyGrid({
      ...
      paging: {
        barType: 'none'
      }
      ...
    ...
    grid.lastPage();
    

    load

    ()

    load data if auto load was disabled.

    data.proxy.autoLoad

    
    grid.load();
    

    lockColumn

    (index: String)

    Lock column to left side by data index.

    
    grid.lockColumn('name');
    

    nextPage

    ()

    Loads the next 'page'.
    Usually it is used for custom paging.

    
    var grid = new FancyGrid({
      ...
      paging: {
        barType: 'none'
      }
      ...
    ...
    grid.nextPage();
    

    on

    (eventName: String, handler: Function, scope: [Object])

    setting handler on grid event.

    
    grid.on('cellclick', function(o){
      
    });
    

    once

    (eventName: String, handler: Function, scope: [Object])

    setting handler on grid event that runs once.

    
    grid.once('cellclick', function(o){
      
    });
    

    prevPage

    ()

    Loads the previous 'page'.
    Usually it is used for custom paging.

    
    var grid = new FancyGrid({
      ...
      paging: {
        barType: 'none'
      }
      ...
    ...
    grid.prevPage();
    

    redo

    ()

    redo changes of undo actions.

    
    grid.redo();
    

    remove

    (id: String)

    removing data item by id.

    
    grid.remove(2);
    

    remove

    (config: Object)

    removing data item by id.

    
    grid.remove({
      id: 2
    });
    

    remove

    (items: Array)

    removing data items by id-s.

    
    grid.remove([2, 5]);
    
    
    grid.remove([{
      id: 2
    },{
      id: 5
    }]);
    

    removeAll

    ()

    remove all data from grid.

    
    grid.removeAll();
    

    removeAt

    (rowIndex: Number)

    removing data item by rowIndex.

    
    grid.removeAt(2);
    

    removeColumn

    (key: String)

    Remove column by data index(key).
    First grid searches column in 'center' side than in 'left' than in 'right'.

    
    grid.removeColumn('age');
    

    removeColumn

    (key: String, side: String)

    Remove column by data index(key) in side.
    Possible side value: 'left', 'center', 'right'.

    
    grid.removeColumn('age', 'left');
    

    removeColumn

    (orderIndex: Number)

    Remove column by data index(key) in side.
    Possible side value: 'left', 'center', 'right'.

    
    grid.removeColumn(0);
    

    removeColumn

    (orderIndex: Number, side: String)

    Remove column by data index(key) in side.
    Possible side value: 'left', 'center', 'right'.

    
    grid.removeColumn(1, 'left');
    

    removeRow

    (rowIndex: Number)

    Alias method of removeAt.

    removing data item by rowIndex.

    
    grid.removeRow(2);
    

    removeRowById

    (id: String)

    Alias method of remove.

    removing data item by id.

    
    grid.removeRowById(2);
    

    removeRowById

    (config: Object)

    Alias method of remove.

    removing data item by id.

    
    grid.removeRowById({
      id: 2
    });
    

    removeRowById

    (items: Array)

    Alias method of remove.

    removing data items by id-s.

    
    grid.removeRowById([2, 5]);
    
    
    grid.removeRowById([{
      id: 2
    },{
      id: 5
    }]);
    

    rightLockColumn

    (index: String)

    Right lock column to left side by data index.

    
    grid.rightLockColumn('name');
    

    save

    ()

    save changes to server data if auto save was disabled.

    data.proxy.autoSave

    
    grid.save();
    

    scroll

    (left: Number, top: Number)

    Scroll grid cells view on left and top.
    Mainly used for advanced grid usage.

    
    grid.scroll(100, 150);
    
    Scroll left
    
    grid.scroll(null, 150);
    

    scroll

    (top: Number)

    Scroll grid cells view on top.
    Mainly used for advanced grid usage.

    
    grid.scroll(100);
    

    scrollToRow

    (rowIndex: Number)

    Scroll grid cells view to row with number rowIndex.

    
    grid.scrollToRow(21);
    

    search

    (value: Mixed)

    Search value by all columns.

    To use this method it requires to set property searching to true

    
    grid.search('Ted');
    

    selectRow

    (rowIndex: Number)

    select row at rowIndex.

    
    grid.selectRow(0);
    

    setColumnTitle

    (index: Number|String, value: String, side: String)

    Update column title text.

    • index- Number|StringColumn order/column data index.
    • value - String.
      New value.
    • side - String.
      Side of column: left, center, right

    Example: index - String

    
    var grid = new FancyGrid({
      ...
    ...
    grid.setColumnTitle('age', 35);
    

    Example: index - Number

    
    var grid = new FancyGrid({
      ...
    ...
    grid.setColumnTitle(1, 'Column');
    

    Example: locked side

    
    var grid = new FancyGrid({
      ...
    ...
    grid.setColumnTitle(1, 'Column', 'left');
    

    selectColumn

    (key: String)

    select column by index(key).
    It requires selModel to be column or columns

    
    grid.selectColumn('name');
    

    set

    (rowIndex: Number, key: String, value: Mixed)

    change data item value at rowIndex.

    
    grid.set(7, 'age', 35);
    

    setById

    (id: Mixed, key: String, value: Mixed)

    change data item value by id.

    
    grid.setById(1, 'age', 35);
    
    
    grid.setById(7, {
      name: 'Nick',
      age: 43
    });
    

    setData

    (data: Array)

    Rough but easy way to set new data to grid.
    It requires to rerender(grid.update()) grid after setting new data to view changes.

    
    grid.setData([
      {...},
      {...},
      ...
    ]);
    grid.update();
    

    setHeight

    (value: Number)

    Set grid height.

    
    grid.setHeight(400);
    

    setPage

    (page: Number)

    Loads 'page'.
    Usually it is used for custom paging.

    
    var grid = new FancyGrid({
      ...
      paging: {
        barType: 'none'
      }
      ...
    ...
    grid.setPage(2);
    

    setPageSize

    (value: Number)

    Set page size and load data.
    Usually it is used for custom paging.

    
    var grid = new FancyGrid({
      ...
      paging: {
        barType: 'none'
      }
      ...
    ...
    grid.setPage(20);
    

    setParams

    (params: Object)

    Set request params.
    Method is used for dynamic changing request params.

    
    var grid = new FancyGrid({
      ...
      data: {
        proxy: {
    	  ...
    	  params: {
    	    good: 'tire'
    	  }
    	}
      },
      ...
    ...
    grid.setParams({
      good: 'pump'
    });
    grid.load();
    

    setSelModel

    (selModel: String)

    Set selection model.

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

    
    grid.setSelModel('rows');
    

    setSubTitle

    (value: String)

    Set new sub title text.

    
    grid.setSubTitle('New Sub Title');
    

    setTitle

    (value: String)

    Set new title text.

    
    grid.setTitle('New Title');
    

    setTrackOver

    (trackType: String, enabled: Boolean)

    Enables|disables track type.

    Possible values of trackType: cell, row, column.

    
    grid.setTrackOver('column', true);
    

    setUrl

    (url: Object|String)

    Method is used for changing url requests.

    Change read url

    
    var grid = new FancyGrid({
      ...
      data: {
        proxy: {
    	  url: 'ajax.php'
    	}
      },
      ...
    ...
    grid.setUrl('new-ajax.php');
    grid.load();
    

    Change RESTful

    
    var grid = new FancyGrid({
      ...
      data: {
        proxy: {
    	  type: 'rest',
    	  url: 'app.php/users'
    	}
      },
      ...
    ...
    grid.setUrl('app.php/staff');
    grid.load();
    

    Change CRUD

    
    var grid = new FancyGrid({
      ...
      data: {
        proxy: {
    	  api: {
            create: 'new.php',
            read: 'load.php',
            update: 'update.php',
            destroy: 'destroy_action.php'
          }
    	}
      },
      ...
    ...
    grid.setUrl({
      create: 'changed-new.php',
      read: 'changed-load.php',
      update: 'changed-update.php',
      destroy: 'changed-destroy_action.php'
    });
    grid.load();
    

    setWidth

    (value: Number)

    Set grid width.

    
    grid.setWidth(400);
    

    show

    ()

    show grid if it was hidden.

    
    grid.show();
    

    showColumn

    (dataIndex: String)

    Show column if it was hidden before or has property hidden: true.
    dataIndex is column index of data.

    
    new FancyGrid({
      ...
      columns: [{
        index: 'name',
    	hidden: true,
    	title: 'Name',
      ...
    
    grid.showColumn('name');
    

    showColumn

    (orderIndex: Number)

    Show column by it's order in columns. orderIndex is order in columns.

    
    grid.showColumn(0);
    

    showColumn

    (side: String, dataIndex: String)

    Show column by it's order in columns. orderIndex is order in columns.

    
    grid.showColumn('left', 'name');
    grid.showColumn('right', 'surname');
    

    showLoadMask

    (text: String)

    Show mask text and block grid/panel with transparent div.
    If do not set text, it will be shown default.

    
    Fancy.getWidget('myGrid').showLoadMask('Searching');
    

    sort

    (index: String, direction: String)

    Sort grid by data index and direction.
    Possible values of direction: 'ASC'|'DESC'|'DROP'

    
    grid.sort('age', 'ASC');
    

    stopEditor

    ()

    Stops showing editor once on click edit event.

    It is rare used method for advanced usage.

    
    events: [{
      cellclick: function(grid){
        grid.stopEditor();
        ...
      }
    ...
    

    stopSelection

    ()

    Soft disabling selection without disabling checkboxes.

    
    grid.stopSelection();
    

    un

    (eventName: String, handler: Function)

    unset handler on grid event.

    
    function onCellClick(grid, o){
      ...
    }
    
    grid.on('cellclick', onCellClick);
    ...
    
    grid.un('cellclick', onCellClick);
    

    undo

    ()

    undo past change.

    
    grid.undo();
    

    undoAll

    ()

    undo all changes.

    
    grid.undoAll();
    

    unLockColumn

    (index: String)

    Unlock column to left side by data index.

    
    grid.unLockColumn('name');
    

    update

    ()

    if in grid data there is changes but item data(Model) or other that
    was not rendered than running method update will render changes.

    
    grid.update();