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.

    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

    headercellenter

    (grid: Object, params: Object)

    grid header cell enter event.

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

    headercellleave

    (grid: Object, params: Object)

    grid header cell leave event.

    • e - Event
    • cell - Dom.
      Cell header dom.
    • column - Object.
      Column configs.
    • columnIndex - 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.

    statechange

    (grid: Object, state: Object)

    Grid state change event.

    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.