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://code.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.

    Values: add.

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

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

    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();
    

    destroy

    ()

    destroy grid.

    
    grid.destroy();
    

    each

    (fn: Function, [scope: Object])

    Goes through all displayed items.

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

    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.find('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();
    

    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();
    

    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();
    

    getPageSize

    (): Number

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

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

    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();
    

    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();
    

    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();
    

    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){
      
    });
    

    prevPage

    ()

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

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

    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
    }]);
    

    removeAt

    (rowIndex: Number)

    removing data item by rowIndex.

    
    grid.removeAt(2);
    

    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

    (top: Number)

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

    
    grid.scroll(100);
    

    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);
    

    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
    });
    

    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);
    

    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);
    

    setWidth

    (value: Number)

    Set grid width.

    
    grid.setWidth(400);
    

    show

    ()

    show grid if it was hidden.

    
    grid.show();
    

    stopEditor

    ()

    Stops showing editor once on click edit event.

    It is rare used method for advanced usage.

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

    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');
    

    un

    (eventName: String, handler: Function)

    unset handler on grid event.

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

    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();