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