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

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

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.

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.

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.
`