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'

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

Getting Selection

Depending on selection type it will return or Array of objects for row/rows selection model
and Array of arrays for cell/cells selection model.

Example:

var selection = grid.getSelection();

Clear Selection

Example: clear selection

grid.clearSelection();

Key Navigation

By default Key Navigation is enabled.
You are able to change selection over keys: LEFT, RIGHT, UP, DOWN.
Example: Disable Key Navigation

selModel: {
  type: 'row',
  keyNavigation: false
}

allowDeselect

In some cases it needs to deselect row if it was selected before. Example:

selModel: {
  type: 'row',
  allowDeselect: true
}

Tree Data: selectLeafsOnly

Special for Tree Data it was added property selectLeafsOnly.
It allows to do selection for only leaf rows. Example:

selModel: {
  type: 'row',
  selectLeafsOnly: true
}

See also

Method clearSelection
Method deSelectRow
Method disableSelection
Method enableSelection
Method selectRow
Method setSelModel
Method setSelModel
Method stopSelection

Tutorial Link Selection