Selection

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'
Example: selModel.type


selModel: {
  type: 'cell'
}
Example: selModel.type with tracking hover state
Enables adding css classname fancy-grid-cell-over on cell when mouseover.


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'
Example: selModel.type


selModel: {
  type: 'cells'
}
Example: selModel.type with tracking hover state
Enables adding css classname fancy-grid-cell-over on cell when mouseover.


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'
Example: selModel.type


selModel: {
  type: 'column'
}
Example: selModel.type with tracking hover state
Enables adding css classname fancy-grid-column-over on column when mouseover.


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'
Example: selModel.type


selModel: {
  type: 'columns'
}
Example: selModel.type with tracking hover state
Enables adding css classname fancy-grid-column-over on column when mouseover.


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: {
  type: 'row',
  checkOnly: true
},
columns: [{
  type: 'select',
  memory: true
},{
...