Docs
API

    • Events

    There are 3 ways of setting handlers on events with several combinations.

    Over function

    Samples 

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

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

});

    Over params

    Samples 

    
var grid = new FancyGrid({
  ...
  events: [{
    cellclick: function(grid, o){
      
    },
    scope: {},// Scope of execution. Not required
	delay: 100// Delay in milliseconds. Not required
  },{
    celldblclick: function(grid, o){
      
    }
  }]
  ...
});

    Samples: handler inside 

    
var grid = new FancyGrid({
  ...
  events: [{
    cellclick: 'onCellClick'
  },{
    celldblclick: 'onCellDBLClick'
  }],
  onCellClick: function(grid, o){
    
  },
  onCellDBLClick: function(grid, o){
    
  }
  ...
});

    Over controllers

    Read section about Controllers

    List of events

    beforeedit

    (grid: Object, params: Object)

    Event that fires before to show cell or row editor.
    It is very useful for cases when requires to prevent showing editor.

    Example

    
	var grid = new FancyGrid({
	  ...
	  events: [{
		beforeedit: function(grid, o){
		  if(o.data.type === 'country'){
			grid.stopEditor();
		  }
		}
	  }]
	  ...
	});
    • e- Event
    • data - Object.
      Item values
    • cell - Dom.
      Cell dom.
    • column - Object.
      Column options.
    • columnIndex - Number.
      Column order index.
    • item - Model.
      data item(Model).
    • rowIndex - Number.
      row order index.
    • side - String.
      Side of column: left, center, right
    • value - String|Number|Array.
      Item value

    cellclick

    (grid: Object, params: Object)

    cell click event.
    • e- Event
    • data - Object.
      Item values
    • cell - Dom.
      Cell dom.
    • column - Object.
      Column options.
    • columnIndex - Number.
      Column order index.
    • item - Model.
      data item(Model).
    • rowIndex - Number.
      row order index.
    • side - String.
      Side of column: left, center, right
    • value - String|Number|Array.
      Item value

    celldblclick

    (grid: Object, params: Object)

    cell double click event.
    • e- Event
    • data - Object.
      Item values
    • cell - Dom.
      Cell dom.
    • column - Object.
      Column options.
    • columnIndex - Number.
      Column order index.
    • item - Model.
      data item(Model).
    • rowIndex - Number.
      row order index.
    • side - String.
      Side of column: left, center, right
    • value - String|Number|Array.
      Item value

    cellenter

    (grid: Object, params: Object)

    cell enter event.
    • e- Event
    • data - Object.
      Item values
    • cell - Dom.
      Cell dom.
    • column - Object.
      Column options.
    • columnIndex - Number.
      Column order index.
    • item - Model.
      data item(Model).
    • rowIndex - Number.
      row order index.
    • side - String.
      Side of column: left, center, right
    • value - String|Number|Array.
      Item value

    cellleave

    (grid: Object, params: Object)

    cell leave event.
    • e- Event
    • data - Object.
      Item values
    • cell - Dom.
      Cell dom.
    • column - Object.
      Column options.
    • columnIndex - Number.
      Column order index.
    • item - Model.
      data item(Model).
    • rowIndex - Number.
      row order index.
    • side - String.
      Side of column: left, center, right
    • value - String|Number|Array.
      Item value

    changepage

    (grid: Object, page: Number)

    Change page event.

    changepagesize

    (grid: Object, pageSize: Number)

    Change page size event.

    columnclick

    (grid: Object, params: Object)

    column click event.
    • e- Event
    • data - Object.
      Item values. If in config columnClickData is true.
    • cell - Dom.
      Cell dom.
    • column - Object.
      Column options.
    • columnIndex - Number.
      Column order index.
    • side - String.
      Side of column: left, center, right

    columndblclick

    (grid: Object, params: Object)

    column double click event.
    • e- Event
    • data - Object.
      Item values. If in config columnClickData is true.
    • cell - Dom.
      Cell dom.
    • column - Object.
      Column options.
    • columnIndex - Number.
      Column order index.
    • side - String.
      Side of column: left, center, right

    columndrag

    (grid: Object, params: Object)

    column drag event.
    • column - Object.
      Column options.
    • fromSide - String.
      Drag column from side: left, center, right
    • toSide - String.
      Drag column to side: left, center, right

    columnenter

    (grid: Object, params: Object)

    column enter event.
    • e- Event
    • data - Object.
      Item values. If in config columnClickData is true.
    • cell - Dom.
      Cell dom.
    • column - Object.
      Column options.
    • columnIndex - Number.
      Column order index.
    • side - String.
      Side of column: left, center, right

    columnhide

    (grid: Object, params: Object)

    column hide event.
    • column - Object.
      Column options.
    • side - String.
      Side of column: left, center, right

    columnleave

    (grid: Object, params: Object)

    column leave event.
    • e- Event
    • data - Object.
      Item values. If in config columnClickData is true.
    • cell - Dom.
      Cell dom.
    • column - Object.
      Column options.
    • columnIndex - Number.
      Column order index.
    • side - String.
      Side of column: left, center, right

    columnresize

    (grid: Object, params: Object)

    column resize event.
    • cell - Dom.
      Cell dom.
    • column - Object.
      Column options.
    • width - Number.
      Column width.
    • side - String.
      Side of column: left, center, right

    columnshow

    (grid: Object, params: Object)

    column show event.
    • column - Object.
      Column options.
    • side - String.
      Side of column: left, center, right

    deselectrow

    (grid: Object, rowIndex: Number, dataItem: Model)

    Grid row deselection event.

    dropitems

    (grid: Object, items: Array, rowIndex: Number)

    On drop items from another grid.
    It is used only if gridToGrid param is set.

    • grid - grid.
    • items - drop rows(items).
    • rowIndex - rowIndex of drop.

    filter

    (grid: Object, filters: Array)

    Fired whenever grid was filtered.

    init

    (grid: Object)

    Grid init event.

    insert

    (grid: Object, item: Model)

    Grid insert event.

    headercellclick

    (grid: Object, params: Object)

    Grid header cell event.
    • e - Event
    • cell - Dom.
      Cell header dom.
    • index - Number.
      Column order index.
    • side - String.
      Side of column: left, center, right

    load

    (grid: Object, params: Object)

    grid load event.

    lockcolumn

    (grid: Object, params: Object)

    lock column from center to left event.
    • column - Object.
      Column options.

    remove

    (grid: Object, id: Number, item: Model)

    data item remove.
    • id - Number.
      data item id.
    • item - Model.
      data item(Model).

    rightlockcolumn

    (grid: Object, params: Object)

    lock column from center to right event.
    • column - Object.
      Column options.

    rowclick

    (grid: Object, params: Object)

    row click event.
    • e- Event
    • data - Object.
      Item values
    • cell - Dom.
      Cell dom.
    • column - Object.
      Column options.
    • columnIndex - Number.
      Column order index.
    • item - Model.
      data item(Model).
    • rowIndex - Number.
      row order index.
    • side - String.
      Side of column: left, center, right
    • value - String|Number|Array.
      Item value

    rowdblclick

    (grid: Object, params: Object)

    row click event.
    • e- Event
    • data - Object.
      Item values
    • cell - Dom.
      Cell dom.
    • column - Object.
      Column options.
    • columnIndex - Number.
      Column order index.
    • item - Model.
      data item(Model).
    • rowIndex - Number.
      row order index.
    • side - String.
      Side of column: left, center, right
    • value - String|Number|Array.
      Item value

    rowenter

    (grid: Object, params: Object)

    row enter event.
    • e- Event
    • data - Object.
      Item values
    • cell - Dom.
      Cell dom.
    • column - Object.
      Column options.
    • columnIndex - Number.
      Column order index.
    • item - Model.
      data item(Model).
    • rowIndex - Number.
      row order index.
    • side - String.
      Side of column: left, center, right
    • value - String|Number|Array.
      Item value

    rowleave

    (grid: Object, params: Object)

    row leave event.
    • e- Event
    • data - Object.
      Item values
    • cell - Dom.
      Cell dom.
    • column - Object.
      Column options.
    • columnIndex - Number.
      Column order index.
    • item - Model.
      data item(Model).
    • rowIndex - Number.
      row order index.
    • side - String.
      Side of column: left, center, right
    • value - String|Number|Array.
      Item value

    select

    (grid: Object, selection: Array|Object)

    Grid selection event.
    Argument selection contains the same as method grid.getSelection() returns.

    selectrow

    (grid: Object, rowIndex: Number, dataItem: Model)

    Grid row selection event.

    servererror

    (grid: Object, errorName: String, error: Error, response: Object)

    Grid server error event.
    It catches all errors that occures when grid comminicates with server.

    set

    (grid: Object)

    Grid cell change value event.
    • key - String|Number.
      Column index(key).
    • rowIndex - Number.
      Row index.
    • value - String|Number.
      New cell value.
    • oldValue - String|Number.
      Old cell value.

    sort

    (grid: Object, params: Object)

    Grid sort event.
    • key - String|Number.
      Column index(key).
    • action - String.
      Sort direction: asc, desc.

    update

    (grid: Object)

    Fires whenever grid cells were updated with new data

    unlockcolumn

    (grid: Object, params: Object)

    unlock column from left or right side to center side event.
    • column - Object.
      Column options.