How to work with Webix Grid select modes.

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

Available modes are:

Area selection is available in Webix DataGrid PRO version only

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

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

Type of selection Related parameters

single cell

**Table 1** Types of selection
Type of selection	Related parameters
single cell	`webix.grid({ select:"cell", })` `</td> </tr> <tr> <td> single row</td> <td>` `webix.grid({ select:"row" })` `</td> </tr> <tr> <td> single column</td> <td>` `webix.grid({ select:"column", })` `</td> </tr> <tr> <td> multiple cells</td> <td>` `webix.grid({ select: "cell", multiselect: true })` `</td> </tr> <tr> <td> multiple rows </td> <td>` `webix.grid({ select: "row", multiselect: true })` `</td> </tr> <tr> <td> multiple columns </td> <td>` `webix.grid({ select: "column", multiselect: true })` `</td> </tr> <tr> <td> visual block selection </td> <td>` `select: "cell", multiselect: true, blockselect: true` `</td> </tr> </tbody>`

webix.grid({
    select:"cell",
})

  </td>
</tr>
<tr>
  <td> single row</td>
  <td>

webix.grid({
    select:"row"
})

  </td>
</tr>
<tr>
  <td> single column</td>
  <td>

webix.grid({
    select:"column",
})

  </td>
</tr>
<tr>
  <td> multiple cells</td>
  <td>

webix.grid({
    select: "cell", multiselect: true
})

  </td>
</tr>
<tr>
  <td> multiple rows  </td>
  <td>

webix.grid({
    select: "row",
    multiselect: true
})

  </td>
</tr>
<tr>
  <td> multiple columns  </td>
  <td>

webix.grid({
    select: "column",
    multiselect: true
})

  </td>
</tr>
<tr>
  <td> visual block selection </td>
  <td>

select: "cell", multiselect: true, blockselect: true

  </td>
</tr>
</tbody>

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

Enabling multi row selection

webix.grid({
  select:"row",
  multiselect:true
});

**Table 2** Selection methods
Method	Description
[clearSelection](/docs/api/datagrid-clearselection)	clears selection
[getSelectedId](/docs/api/datagrid-getselectedid)	returns the selected cells
[mapSelection](/docs/api/datagrid-mapselection)	executes some custom method for all cells in the currently selected block
[moveSelection](/docs/api/datagrid-moveselection)	moves selection to the specified direction
[select](/docs/api/datagrid-select)	selects the specified element
[selectRange](/docs/api/datagrid-selectrange)	selects the specified range of elements
[unselect](/docs/api/datagrid-unselect)	cancels selection of the specified element

**Table 3** Selection events
Event	Description
[onAfterSelect](/docs/api/datagrid-onafterselect-event)	fired after a cell is selected
[onAfterUnSelect](/docs/api/datagrid-onafterunselect-event)	fired after a cell is unselected
[onBeforeSelect](/docs/api/datagrid-onbeforeselect-event)	fired before a cell is selected
[onBeforeUnSelect](/docs/api/datagrid-onbeforeunselect-event)	fired before a cell is unselected
[onSelectChange](/docs/api/datagrid-onselectchange-event)	fired when selection is changed in DataGrid

Related Methods