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: {}// 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

    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

    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

    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.

    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.

    remove

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

    data item remove.

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

    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

    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.