Selection with Datatable

In DataTable you can specify different types of selection depending on your needs.

Available modes are:

  1. cell;
  2. row;
  3. column;
  4. multi cell;
  5. multi row;
  6. multi column;
  7. block selection;
  8. area selection.

Area selection is available in PRO version only

The desired type is set through parameters select, multiselect and blockselect.

The table below shows which combination of parameters you should use for each type.

Table 1 Types of selection
Type of selection Related parameters
single cell
select:"cell"
single row
select:"row"
single column
select:"column"
multiple cells
select: "cell", multiselect: true
multiple rows
select: "row", multiselect: true
multiple columns
select: "column", multiselect: true
visual block selection
select: "cell", multiselect: true, blockselect: true

For example, to set in your DataTable multi row selection, you should use the following code:

Enabling multi row selection

grid = webix.ui({
    view:"datatable",
    select:"row",
    multiselect:true
})

Related sample:  Multi-row selection

Related methods

Table 2 Selection methods
Method Description
clearSelection clears selection
getSelectedId returns the selected cells
mapSelection executes some custom method for all cells in the currently selected block
moveSelection moves selection to the specified direction
select selects the specified element
selectRange selects the specified range of elements
unselect cancels selection of the specified element

Related events

Table 3 Selection events
Event Description
onAfterSelect fired after a cell is selected
onAfterUnSelect fired after a cell is unselected
onBeforeSelect fired before a cell is selected
onBeforeUnSelect fired before a cell is unselected
onSelectChange fired when selection is changed in DataTable
Back to top
If you have not checked yet, be sure to visit site of our main product Webix web development library and page of javascript datatables product.