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