Selection

Screencast

You can study this sample over screencast.

Preface

FancyGrid supports several variants of selection.
They are: cell, cells, column, columns, row, rows.
There are 2 types to set selection type: over selModel and over selModel.type if needed to set selection params.
Another one very often used with selection is tracking over.

Cell Selection

Select only one cell at a time.
To select it requires to click on cell.
Example: selModel

selModel: 'cell'

selModel: {
  type: 'cell'
}

selModel: {
  type: 'cell'
},
cellTrackOver: true

Cells Selection

Select range of cells.
To select it requires to mousedown on cell and move cursor.
Example: selModel

selModel: 'cells'

selModel: {
  type: 'cells'
}

selModel: {
  type: 'cells'
},
cellTrackOver: true

Column Selection

Select only one column at a time.
To select it requires to click on column.
Example: selModel

selModel: 'column'

selModel: {
  type: 'column'
}

selModel: {
  type: 'column'
},
columnTrackOver: true

Columns Selection

Select number of columns.
To select it requires to mousedown on column and move.
Example: selModel

selModel: 'columns'

selModel: {
  type: 'columns'
}

selModel: {
  type: 'columns'
},
columnTrackOver: true

Row Selection

Select only one row at a time.
To select it requires to click on row or checkbox in column with type equals to select.
For row selection it is avaliable checkbox selection.
For that it needs to add column with type equals to select Example: selModel

selModel: 'row'

Example: selModel.type

selModel: {
  type: 'row'
}

Example: selModel.type

selModel: {
  type: 'row'
}

Example: selModel.type

selModel: {
  type: 'row'
},
columns: [{
  type: 'select'
},{
...

Example: selModel.type

selModel: {
  type: 'row'
},
columns: [{
  type: 'select'
},{
...

Example: selModel.type with tracking hover state
Enable adding css classname fancy-grid-cell-over on all cells of row when mouseover.

selModel: {
  type: 'row'
},
trackOver: true,
columns: [{
  type: 'select'
},{
...

Example: checkOnly
Enables selection only over checkbox.
Requires selModel types: row or rows.

selModel: {
  type: 'row',
  checkOnly: true
},
columns: [{
  type: 'select'
},{
...

Rows Selection

Select number of rows.
It adds option to select all in header in column with type equals to select

To select it requires to mousedown on row and move or click on checkbox in column with type equals to select.
For row selection it is avaliable checkbox selection.
For that it needs to add column with type equals to select Example: selModel

selModel: 'rows'

Example: selModel.type

selModel: {
  type: 'rows'
}

Example: selModel.type

selModel: {
  type: 'rows'
}

Example: selModel.type

selModel: {
  type: 'rows'
},
columns: [{
  type: 'select'
},{
...

Example: selModel.type with tracking hover state
Enable adding css classname fancy-grid-cell-over on all cells of row when mouseover.

selModel: {
  type: 'rows'
},
trackOver: true,
columns: [{
  type: 'select'
},{
...

Example: checkOnly
Enables selection only over checkbox.
Requires selModel types: row or rows.

selModel: {
  type: 'row',
  checkOnly: true
},
columns: [{
  type: 'select',
  checkOnly: true
},{
...

Example: memory selection
By default sorting, paging and most of actions clear grid selection.
For selection type equals to rows it is possible enable memory for selection.

selModel: 'rows'
columns: [{
  type: 'select',
  memory: true
},{
...

Events

• deselectrow(grid: Object, rowIndex: Number, dataItem: Model)
• select(grid:Object, selection: Array|Object)
• selectrow(grid: Object, rowIndex: Number, dataItem: Model)

events: [{
  select: function(grid, options){
    
  }
}]
...

Methods

• clearSelection() - clear selection
• disableSelection() - disable selection
• enableSelection() - enable selection
• selectRow(rowIndex: Number) - select row
• selectRow(rowIndex: Number, value: Boolean) - select/deselect row
• selectRow(rowIndex: Number, value: Boolean, multi: Boolean) - multi select/deselect row
• selectColumn(key: String) - select column